@colorkid

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

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

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

А как быть если я добавляю модификатор к блоку div container container--pallax, как записать классы div container__title container__title--pallax или divcontainer__title--pallax?
  • Вопрос задан
  • 563 просмотра
Решения вопроса 1
edalis
@edalis
HTML, CSS, JS, Node.js
Модификатор для блока .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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
ilyarsoftware
@ilyarsoftware
Разработка Веб-проектов (UMI.CMS, Yii, BEM)
Добавив модификатор к блоку .container--parallax {} можно учитывать его наличие в реализации всех элементов блока .container--parallax .container__title {}.

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


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

Как как именно поступать решать вам, это зависит от потребностей, методология не решает подобные вопросы.
Ответ написан
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Пишем parallax правильно, ребята :)
Ответ написан
bagau
@bagau
Фронтент разработчик
А можно ли писать вот так:
<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>

?
В каких случаях так можно писать?
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы