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

Question

[Дмитрий Локшин]

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

Есть такая 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;
}

Comments

[Сергей delphinpro]

не лучше сделать модифицированный блок?
проще говоря — использовать модификатор. Это более в духе БЭМ

[i]

Сергей, миксы тоже в духе БЭМ и что из этого более в духе БЭМ миксы или модификаторы...?

[quramolt]

Илья Рогов, миксы - это если бы дело было в header__locator

[Дмитрий Локшин]

Илья Рогов, Это не микс, а изменение поведения в контексте элемента, в БЭМ написано, что вложенность допустима, но не рекомендуется. Мне просто проще модифицировать блок к контексте header, чем добавлять 'элементу input модификатор, например locator__text_red, т.к. я точно уверен, что красной надпись у меня будет только в header и нигде больше.
На самом дели пример не совсем удачный привел, т.к. у меня в контексте header элемент меняет не цвет, а размер, а такой размер точно будет только в контексте header.

[Сергей delphinpro]

Илья Рогов, микс — это понятие применимое к разметке, объединение двух БЭМ узлов на едином DOM-узле. При этом css остаётся линейным.
Автор предлагает использовать в css конструкцию .header__locator .locator__input смешивая селекторы разных блоков. Это не есть true. Хорошо, когда один блок описан в одном файле. А не в нескольких.

[Сергей delphinpro]

в данном случае стоит использовать именно модификацию
.locator_for-header .locator__input

[Дмитрий Локшин]

Сергей, Да, точно, хорошо подумал и тоже пришел к такому варианту, спасибо!

[i]

Сергей,

<div class="select select_mode_radio-check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select3","text":"—"}}'><input class="select__control" type="hidden" name="select3" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563627391 uniq14953563627392 uniq14953563627393"
        aria-labelledby="uniq14953563627394" type="button"><span class="button__text" id="uniq14953563627394">Мастер-класс</span><span class="icon select__tick"></span></button>
    <div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
        data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
        <div class="menu menu_size_m menu_theme_islands menu_mode_radio-check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
            <div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563627391" aria-checked="false">Доклад</div>
            <div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563627392" aria-checked="true">Мастер-класс</div>
            <div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563627393" aria-checked="false">Круглый стол</div>
        </div>
    </div>
</div>

https://ru.bem.info/platform/libs/bem-components/6...

[i]

Я все по true BEM сказал, обратите внимание на select__menu menu__control

[Сергей delphinpro]

Илья Рогов, ёлки-палки, я знаю что такое миксы. Я выше чётко об этом написал. Постарайтесь понять мой предыдущий комментарий.

Answer 1

[tema_sun]

Как по мне, то это не тот случай, когда нужен каскад. Я за модификатор.

Answer 2

[quramolt]

https://ru.bem.info/methodology/css - если уж на то пошло, то БЭМ стал менее строгим и теперь там даже допускается каскад.

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

https://ru.bem.info/methodology/block-modification/ - а вот здесь ответы на твой вопрос.

Answer 3

[4mobile]

я бы написал так

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

Answer 4

[skepsikmod]

Предельно корректная разметка.
Как вариант, не миксовать блоки, а вкладывать блок в элемент, но это на любителя и по ситуации.

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