Правильно ли я делаю подклассы моего CSS? - PullRequest
Новая
       21

Правильно ли я делаю подклассы моего CSS?

5 голосов
/ 09 февраля 2012

Я делаю набор кнопок для своего сайта, и мне нужна профессиональная проницательность.

Чтобы уменьшить раздувание CSS, я хочу создать подклассы для кнопок разных цветов, ex .button.blue.

Будут ли следующие проблемы в будущем? (при условии, что я не делаю класс просто .blue) Должен ли я использовать что-то вроде .button.button-blue вместо этого? 

.button {
  display:inline-block;
  padding: 9px 18px;
  margin: 20px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  background: #FFE150;
}
.button.blue {
  background: #49b8e7;
  border:1px solid #54abcf;
  border-bottom:1px solid #398fb4;
  color:#FFF
  text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
  height: 50px;
}
.header.blue {
  background: blue;
  color: #fff;
}

Ответы [ 4 ]

8 голосов
/ 09 февраля 2012

То, что у вас есть с мультиклассами, будет работать нормально, если вы хотите, чтобы они работали так: 

<div class="button blue">
Will use .button and .button.blue
</div>

<div class="button">
Will only use .button
</div>

<div class="header blue">
Will  use .header and .header.blue
</div>

<div class="header">
Will only use .header
</div>

<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
1 голос
/ 09 февраля 2012

Селектор, подобный .button.blue, фактически выбирает для элемента, в котором классы "blue" и "button" являются классами, а не класс с именем .button.blue.См. http://www.w3.org/TR/CSS21/selector.html#class-html.

. Вы можете использовать правило стиля .button.blue, которое вы перечислили, но вам нужно изменить свой HTML-код, чтобы у вас было что-то вроде <button type="button" class="button blue"/>.Однако на самом деле вам не нужно иметь класс кнопки, так как для выбора в вашем селекторе достаточно быть кнопкой (или <input type="submit"> и т. Д.).Вы можете написать правило CSS, которое просто button.blue, input[type=submit].blue{}

0 голосов
/ 09 февраля 2012

Объедините классы, применяя цвет, который вы хотите к теме.

HTML: 

<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>

CSS: 

.text-field-required {
    //component css theme without colors
}
.default {
    //default color css theme for any component
}
.blue {
    //blue css theme for any component
}
.green {
    //green css theme for any component
}
0 голосов
/ 09 февраля 2012

Кажется, что button.blue достаточно.

Единственное различие между ними заключается в том, что вы используете <button class="button blue"> или <button class="button button-blue">.

Вам даже не нужно дублировать картину синим цветом ... Вы можете просто сделать что-то вроде этого: 

.button
{
// button style
}

.header
{
// header style
}

.blue
{
   background: blue; 
   color: #fff; 
}

Конечно, если вы добавите синий класс к каждому из них. (<div class="header blue"> и <button class="button blue">)

...