БЭМ CSS с общими стилями

У меня есть небольшая путаница, когда дело доходит до использования глобальных стилей. Рассмотрим следующее:

Скажем, у меня есть таблица стилей, которая определяет, как должны быть сделаны кнопки:

/* Button.CSS */
button {
  background-color: #CCC;
}

button.Blue {
  background-color: #00F;
  color: #FFF;
}

Button.Blue.Hollow {
  background-color: none;
  border: 1px solid #00F;
  color: #00F;
}

а затем вы используете кнопку в шаблоне со своей стандартной нотацией БЭМ (я буду использовать нотацию Block__Element--Modifier)

<!-- index.html -->
<ul class="Widget">
  <li class="Widget__Item">
    <button class="Widget__Button"></button>
  </li>
  <li class="Widget__Item">
    <button class="Widget__Button Blue"></button>
  </li>
  <li class="Widget__Item">
    <button class="Widget__Button Blue Hollow"></button>
  </li>
</ul>

Это приемлемая практика смешивать классы таким образом? Я чувствую, что нарушаю какое-то правило стиля инкапсулированного блока.


frontend css bem
person Handonam    schedule 25.11.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я чувствую, что нарушаю какое-то правило стиля инкапсулированного блока.

Верно. Button должен быть блоком, а не элементом. Blue и Hollow являются модификаторами.

С синтаксисом Block__Element--Modifier ваш код должен быть:

.Button {
  background-color: #CCC;
}
.Button--Blue {
  background-color: #00F;
  color: #FFF;
}
.Button--BlueHollow {
  background-color: none;
  border: 1px solid #00F;
  color: #00F;
}

<ul class="Widget">
  <li class="Widget__Item">
    <button class="Button"></button>
  </li>
  <li class="Widget__Item">
    <button class="Button Button--Blue"></button>
  </li>
  <li class="Widget__Item">
    <button class="Button Button--Blue Button--BlueHollow"></button>
  </li>
</ul>

В качестве альтернативы вы можете использовать синтаксис MyBlock-myElement.myModifier (ближе к вашему):

.Button {
  background-color: #CCC;
}
.Button.blue {
  background-color: #00F;
  color: #FFF;
}
.Button.blue.hollow {
  background-color: none;
  border: 1px solid #00F;
  color: #00F;
}

<ul class="Widget">
  <li class="Widget-item">
    <button class="Button"></button>
  </li>
  <li class="Widget-item">
    <button class="Button blue"></button>
  </li>
  <li class="Widget-item">
    <button class="Button blue hollow"></button>
  </li>
</ul>
person Paleo    schedule 26.11.2014
comment
Ах, это звучит хорошо. Я все еще могу изменить последний элемент, если захочу, правильно? Скажем... <button class="Button Button--Blue Button--BlueHollow"> был последним, я мог бы добавить <button class="Button Button--Blue Button--BlueHollow Widget__Button-Last"> вместе с .Widget__Button-Last { color: red; }? - person Handonam; 26.11.2014
comment
Лучше использовать модификатор на блоке Button. Блоку Button не нужно знать, находится ли он на последней позиции. Это просто нужно отображать с красным вариантом. - person Paleo; 27.11.2014
comment
Спасибо Тарх! Чтобы дополнить ваш ответ, это помогло: bem .info/tutorials/start-with-project-stub/ - person Handonam; 05.12.2014