@mDoll

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

Доброго всем дня!
В БЭМ человек новый, поэтому то и дело возникают вопросы. Сегодня появился такой:
Например, у меня есть меню
nav.menu
    a.menu__element(href="#") Пункт 1
    a.menu__element(href="#") Пункт 2
    a.menu__element(href="#") Пункт 3

Оно находится в шапке, в подвале, да ещё где-нибудь (не важно) и в разных местах имеет стилистические отличия, например цвет фона и текста

Как мне правильно оформить блок и элемент? Создавать модификатор для каждого дочернего элемента:
nav.menu.menu_theme_red
    a.menu__element(href="#").menu__element_color_white Пункт 1
    a.menu__element(href="#").menu__element_color_white Пункт 2
    a.menu__element(href="#").menu__element_color_white Пункт 3

Или достаточно будет задать модификатор для блока, а в стилях модификатора задать изменения для элементов?
nav.menu.menu_theme_red
    a.menu__element(href="#") Пункт 1
    a.menu__element(href="#") Пункт 2
    a.menu__element(href="#") Пункт 3

.menu_theme_red
    background: #f00
.menu_theme_red > .menu__element
    color: #fff


Спасибо!
  • Вопрос задан
  • 24 просмотра
Решения вопроса 1
Get-Web
@Get-Web Куратор тега HTML
Front-End Developer
Правильно будет модифицировать или миксовать каждый элемент. Вложенность использовать только в крайнем случае, когда нет других вариантов. Если использовать css переменные, которые задаются в родителе, то в таком случае можно обойтись без модификаторов для элементов, так же можно наследовать цвет и шрифт от родителя, чтобы не задавать лишних модификаторов.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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