CSS BEM дети модификатора - PullRequest
Новая
       21

CSS BEM дети модификатора

1 голос
/ 30 мая 2019

Я новичок в методологии БЭМ, и у меня есть вопрос, нацеленный на дочерний элемент модификатора.

Допустим, у меня есть этот HTML: 

<div class="block-container">
    <div class="block-container__element"></div>
</div>

На block-container Iдобавить модификатор block-container--modifier.

. И CSS будет выглядеть следующим образом: 

.block-container {
    ...
}
.block-container__element {
    ...
}
.block-container--modifier {
    ...
}

И вот мой вопрос: как я могу изменить некоторые атрибуты CSS __element, когда модификаторприменяется?

Насколько я читаю, мы должны избегать использования вложенных детей, но я думаю, что иногда это правило должно быть нарушено для достижения такого рода вещей, я прав?

Я использую чистый CSS, без LESS, без SASS.

1 Ответ

1 голос
/ 31 мая 2019

В общем случае следует избегать каскадов, но не в этом случае.

Если вы уверены, что блок block-container никогда не включается рекурсивно в другой block-container, то вы можете сделать: 

.block-container--modifier .block-container__element {
}

В противном случае вы должны поместить в элемент другой модификатор: block-container__element--modifier.

Существует третье решение, но оно неортодоксально.В некоторых случаях я предлагаю использовать дочерний селектор, если вы уверены, что на уровне DOM элемент является прямым дочерним элементом блока (например, если блок всегда равен <ul>, а элементы - <li> дети).Тогда вы можете сделать: 

.block-container--modifier > .block-container__element {
}
...