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

Question

[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

Спасибо!

Answer 1

[Виталий Першин]

Правильно будет модифицировать или миксовать каждый элемент. Вложенность использовать только в крайнем случае, когда нет других вариантов. Если использовать css переменные, которые задаются в родителе, то в таком случае можно обойтись без модификаторов для элементов, так же можно наследовать цвет и шрифт от родителя, чтобы не задавать лишних модификаторов.

Comments

[mDoll]

Спасибо!