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

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

Чтобы уменьшить раздувание CSS, я хочу разделить мои кнопки на разные цвета, например.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 ответа

Решение

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

<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>
Источник

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

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

Источник

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

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
}
Источник

Похоже на 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">)

Источник
Другие вопросы по тегам