BEM CSS с общими стилями

Question

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

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

/* 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; 
} 

, а затем с помощью кнопки в шаблоне с помощью стандартной нотации BEM (я буду использовать Block__Element- -Модификатор)

<!-- 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> 

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

Answer 1

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

Действительно. 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>