Как по БЭМ написать элемент в блоке с модификатором?

Question

[colorkid]

Всем привет. Обращаюсь в веру БЭМ. Возник вопрос.

Есть блок div container в нем есть элемент div container__title, все ок.

А как быть если я добавляю модификатор к блоку div container container--pallax, как записать классы div container__title container__title--pallax или divcontainer__title--pallax?

Answer 1

[Edward]

Модификатор для блока .container: .container--pallax
Модификатор для элемента .container__title: .container__title--pallax

Возможные варианты:

<div class="container container--pallax">
    <div class="container__title"></div>
</div>

<div class="container container--pallax">
    <div class="container__title container__title--pallax"></div>
</div>

<div class="container">
    <div class="container__title container__title--pallax"></div>
</div>

Comments

[colorkid]

спасибо. Исчерпывающе

Answer 2

[i]

Добавив модификатор к блоку .container--parallax {} можно учитывать его наличие в реализации всех элементов блока .container--parallax .container__title {}.

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

Добавляя модификатор для элемента .container__title--parallax {} мы сужаем область действия модификации только на элемент.

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

Answer 3

[Павел Радьков]

Пишем parallax правильно, ребята :)

Answer 4

[Рафис Багаутдинов]

А можно ли писать вот так:

<div class="container container--pallax">
    <div class="container__title container__title--type--pallax"></div>
</div>

или

<div class="container container--pallax">
    <div class="container__title container__title--context--pallax"></div>
</div>

?
В каких случаях так можно писать?

Comments

[Сергей delphinpro]

Нотация записи модификаторов через двойной дефис не оговаривает модификаторы типа "параметр=значение".
В то время как оригинальная нотация Яндекса предусматривает подобные случаи (и в общем считает их основными)

.container__title_type_parallax

PS
Оригинальная запись, кстати, поддерживается Эмметом в phpStorm(webStorm), разворачивая запись
.container__title_type_parallax[TAB] в

<div class="container__title container__title_type_parallax">