Детский элемент элемента-модификатора?

Question

Возьмем следующую структуру:

<div class='article article--yellow'> 
    <div class='article__headline'>...</div> 
</div> 

<div class='article article--blue'> 
    <div class='article__headline'>...</div> 
</div> 

Если мне нужно сделать article__headline различен для --yellow от --blue, я должен сделать селектор CSS, как:

.article--yellow .article__headline { ... }

Или, в практике минимизации глубина выбора, является ли он синтаксисом BEM для изменения разметки на это:

<div class='article article--yellow'> 
    <div class='article--yellow__headline'>...</div> 
</div> 

Потому что тогда я мог выбрать его, используя только 1 селектор: article--yellow__headline.

Я знаю, что технически это сработает, но я не могу понять, действительно ли это в соответствии с методологией BEM или нет.

Answer 1

Это прекрасный вопрос и bem's faq actually answered it!

Может ли модификатор блока воздействовать на элементы?

Если у меня есть блок-модификатор, для например xmas, и я хочу элементов внутри этого блока, чтобы быть xmas тематикой, как было бы лучше, чтобы сделать это.

Нужен ли суффикс --xmas для каждого элемента? Или это быть на один сценарий использования для гнездования (например block--xmas block__elem { ... }?

Однако в целом BEM рекомендует, чтобы избежать вложенных селекторов, это в случае, когда они являются разумными.

При создании вложенного селектор, вы заявляете, что один объект зависит на другом. Как BEM представляет независимые компоненты, такой подход не рекомендуется, когда мы говорим о 2 различных блоках.

Но когда дело доходит до блока и его элементов, они находятся а не эквивалентное значение. По его определению, элемент не создает никакого значения вне его родительского блока. Таким образом, элемент является блочно-зависимым объектом . Предполагая это, вполне нормально и логично, что на элемент влияет текущее состояние блока.

Таким образом, это довольно узор в BEM закодировать

.my-block--xmas .my-block__button { 
    /* Jingle bells, jingle bells, jingle all the way.*/ } 

Таким образом, ответ должен быть ваш первый подход

.article--yellow .article__headline { ... } 

Answer 2

Я не думаю, что два уровня слишком глубоко для назначения специфичности .article--yellow .article__headline. Технически .article__headline никогда не будет происходить без модификатора цвета .article--yellow.

Хотя имена классов становятся длинными, BEM позволяет вам легко самостоятельно документировать (предполагая, кто приходит после того, как вы поймете эти понятия тоже).Кроме того, для меня компоненты BEM не должны влиять друг на друга, as detailed here.