Как правильно по бэм?

Question

[vvanyazz]

В хэдере у меня меню, я его миксую и называю:
header__menu menu
вложенные элементы меню я называю menu__item, menu__list и тд.

в медиа запросах мне надо изменить отступы у menu__item, но хочу я поменять их именно у header__menu так как мне поступить, учитывая что вложеность в бэм - плохо? Мне тогда миксовать даже элементы или как?

Comments

[Сергей delphinpro]

модификатор для блока
никаких извращений вроде .header .menu__item {}

[Realetive]

Сергей delphinpro, увеличивается связанность — блок header «влияет» на чужой элемент. Если вынести menu в другое место за пределы header, придётся переписывать стили (и, возможно, переносить их в другой файл). Ваш пример решает проблему, но плох с точки зрения методологии.

[Сергей delphinpro]

Realetive, я рекомендовал использовать модификатор

[Realetive]

Сергей delphinpro, пардон. Видимо, я перегрелся…

Answer 1

[Realetive]

Или, стиснув зубы, использовать каскад:

.header__menu.menu .menu__item {
  /* … */
}

или использовать. модификатор — вы пытаетесь модифицировать внутреннее содержимое блока, основываясь на каких-то специфических для этого блока параметрах (расположение внутри header) — резонный повод для модификатора:

.menu_view_header .menu__item {
  /* … */
}

Первый вариант на фоне второго кажется менее «БЭМ», так что советую модификатор.

Comments

[vvanyazz]

а я думал что модификатор может быть только подобного вида:
menu menu_big

[Realetive]

vvanyazz, нет, не только. Вы привели пример «булевого» модификатора, у который весьма ограниченная область применения: button → button_disabled, menu__item — menu__item_active, card → card_hovered и т. д. Когда модификаторы можно сгруппировать по признаку, например, внешнему виду, они записываются в виде «ключ-значение» (блок_общий-признак_значение), например: button_view_primary, button_view_secondary, button_view_error, button_view_info — это позволяет точно определить, что именно (view, т. е. внешний вид,) модифицируется и в каком значение (primary / secondary / info и т. д.). А просто menu_big — непонятно, к чему относится — увеличился размер кнопки (вместо menu_size_big / menu_size_small) ? Или она расположена в большом блоке (menu_position_big-card / menu_position_promo) ?

Вот краткая статья про виды модификаторов: https://ru.bem.info/methodology/quick-start/#модиф...

[Realetive]

vvanyazz, но если у меню всего 2 состояния размера — просто menu и menu_big — то использование булевого модификатора вполне оправдано. Но если появляются menu_big и menu_small, то тут уже лучше их группировать в menu_size_big и menu_size_small. А если вынести в menu_size_normal информацию о размерах, то это красиво разгруппирует стили — в стилях класса .menu {} (display, border-radius, background и т. д.) будут только стили самого меню, а в .menu_size_* — только информация о размерах (отступы, размер шрифта и т. д.).