Приемлема ли такая вложенность селекторов по БЭМ?

Всем привет!
Извиняюсь, за столь легкий вопрос, но что-то запутался малость.

Есть такая html структура:

<header class="header">
     <div class="locator header__locator">
          <span class="locator__text">Some text</span>
     </div>
</header>


Соответственно header и locator это два независимых блока.
Для locator__text имеются свои стили, но в контексте использования блока header я хочу задать ему специфические стили, из-за чего создается каскад, правильное ли такое решение:

.locator {
     position: relative;
}

.locator__text {
     font-size: 18px;
     font-weight: bold;
}

.header__locator .locator__input {
     color: red;
}
  • Вопрос задан
  • 524 просмотра
Пригласить эксперта
Ответы на вопрос 4
tema_sun
@tema_sun
Как по мне, то это не тот случай, когда нужен каскад. Я за модификатор.
Ответ написан
Комментировать
@quramolt
https://ru.bem.info/methodology/css - если уж на то пошло, то БЭМ стал менее строгим и теперь там даже допускается каскад.

Но я бы сделал какой-нибудь модификатор in-header, т.к. я бы быстрее всего вспомнил, что имел ввиду.

https://ru.bem.info/methodology/block-modification/ - а вот здесь ответы на твой вопрос.
Ответ написан
Комментировать
4mobile
@4mobile
WEB developer
я бы написал так
<header class="header">
     <div class="locator locator_header">
          <span class="locator__text">Some text</span>
     </div>
</header>

или так
<header class="header">
     <div class="locator">
          <span class="locator__text locator__text_header">Some text</span>
     </div>
</header>
Ответ написан
Комментировать
@skepsikmod
Предельно корректная разметка.
Как вариант, не миксовать блоки, а вкладывать блок в элемент, но это на любителя и по ситуации.

Но стили не совсем корректны. Не любит БЭМ каскады.
Хоть формально родитель и может знать о своем потомке.
Впрочем, опять же, все от ситуации. Где-то, в реальных примерах, проще задать модификатор, где-то модифицировать через родителя.
Вопрос понимания уместности использования той или иной комбинации.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы