CSS - Расширение свойств класса

Question

Я довольно новичок в CSS и до сих пор нашел свой путь. Я создаю эту кнопку, как ссылки с тенями и т. Д. Теперь на сайте есть несколько таких кнопок - все о кнопках одинаково - за исключением того, что несколько свойств изменяются как ширина и размер шрифта.

Теперь вместо копирования одного и того же кода снова и снова для каждой кнопки - есть способ расширения кнопки и добавления только тех свойств, которые меняются.

Пример из двух кнопок - CSS

.ask-button-display { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
width:350px; 
font-size: 20px; 
font-weight: bold; 
padding:10px; 
} 


.ask-button-submit { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
font-weight: bold; 
width:75px; 
font-size: 12px; 
padding: 1px; 
} 

И это, как я в настоящее время использовать его в моем HTML

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a> 

Так мне интересно, если есть более чистый способ сделать это - как

.button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 

AND THEN SOMEHOW EXTEND IT LIKE 
.button #display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 

.button #ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
} 

Но я не уверен, как это сделать. Спасибо за ваши входы

Answer 1

Вы можете добавить несколько классов к одному элементу, так что есть один класс .button, который охватывает все, то .button подать класс, который добавляет вещи в

Например:.

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button-submit { 
    background-color: green; 
}​ 

Смотреть живой jsFiddle here

В вашем случае, должно работать:

.button { 
    background: #8BAF3B; 
    border-radius: 4px; 
    display: block; 
    letter-spacing: 0.5px; 
    position: relative; 
    border-color: #293829; 
    border-width: 2px 1px; 
    border-style: solid; 
    text-align:center; 
    color: #FFF; 
    width:350px; 
    font-size: 20px; 
    font-weight: bold; 
    padding:10px; 
} 


.button-submit { 
    width:75px; 
    font-size: 12px; 
    padding: 1px; 
}​ 

Смотреть живой jsFiddle here

Answer 2

.ask-button-display, 
.ask-button-submit { 
    /* COMMON RULES */ 
} 

.ask-button-display { 

} 

.ask-button-submit { 

} 

Answer 3

Добавьте класс кнопки для обоего ссылок для общих частей

.button { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
} 

держать в других классах правил, которые не являются общими.

И ваш HTML будет

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a> 
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a> 

Answer 4

Вы можете сделать это, так как вы можете применить более одного класса к элементу. Создайте свой мастер-класс и другие классы меньшего размера, а затем просто примените их по мере необходимости. Например:

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a> 

Это применимо к кнопке и представляет классы, которые вы создадите, позволяя также применять эти классы отдельно.

Измените пример кода по линиям:

.master_button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 
AND THEN SOMEHOW EXTEND IT LIKE 
.button_display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 
.button_ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
} 

И применяются как:

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a> 

Answer 5

Вы можете посмотреть в Sass. С помощью Sass вы можете в основном создавать переменные в вашем файле css, а затем повторно использовать их снова и снова.http://sass-lang.com/ Следующий пример взят с официального сайта Sass:

$blue: #3bbfce; 
$margin: 16px; 

.content-navigation { 
    border-color: $blue; 
    color: 
    darken($blue, 9%); 
} 

.border { 
    padding: $margin/2; 
    margin: $margin/2; 
    border-color: $blue; 
} 

Answer 6

Вместо того, чтобы повторять общий «Добавление класса кнопки к элементу» ответ, я собираюсь показать вам что-то новое в странных и юродивый мире новый возраст CSS, или более известный как SCSS!

Это повторное использование кода в таблицах стилей может быть достигнуто с помощью так называемого «микса». Это позволяет нам использовать несколько стилей, используя атрибут «@include».

Позвольте привести пример.

@mixin button($button-color) { 
    background: #fff; 
    margin: 10px; 
    color: $color; 
} 

, а затем, когда у нас есть кнопка мы говорим

#unique-button { 
    @include button(#333); 
    ...(additional styles) 
} 

Подробнее здесь: http://sass-lang.com/tutorial.html.

Распространение слова !!!

Answer 7

Вы можете попробовать это:

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button.submit { 
    background-color: green; 
} 
.button.submit:hover { 
    background-color: #ffff00; 
} 

Таким образом, вы не должны повторять слово и возможность использовать классы элементов, как это:

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a> 

Смотрите пример в JSFiddle (http://goo.gl/6HwroM)