Как правильно записать по БЭМ на примере меню?

Question

[Senseich]

Всем привет! Решил освоить методологию БЭМ, но что-то до конца её не пойму. Как я понял суть состоит в том, чтобы каждому тэгу дать индивидуальный класс.
Можете на примере простого меню показать, как правильно написать в html и css

Вот к примеру есть код:

<div class="menu">
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>

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

Answer 1

[Сергей delphinpro]

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item menu__item_state_active"><a class="menu__link" href=""></a></li>
    <li class="menu__item"><a class="menu__link" href=""></a></li>
    <li class="menu__item"><a class="menu__link" href=""></a></li>
  </ul>
</nav>

Comments

[Senseich]

Сергей delphinpro , А вот это menu__item_state_active для активного пункта я так понимаю, с помощью JS добавляется?
А если на сайте три разных меню, это и придумывать всем разные классы для блока, для ul, для li, для ссылок?

[Паша Глеев]

почему не так menu__item--active?

[Сергей]

Паша Глеев, потому что в спецификации модификатор задаётся через одно нижнее подчеркивание:
https://ru.bem.info/methodology/quick-start/#%D0%9...

Правда на практике я встречал и другие задавания модификаторов, как и в вашем примере тоже.

Я использую БЭМ-нейминг как в спецификации, одна из причин - потому что так можно выделить весь класс двойным кликом.

[Senseich]

Сергей Михалевич, подскажите по моему вопросу, я правильно понял, что по БЭМ у всего на сайте должны быть уникальные классы:

А если на сайте три разных меню, это нужно задавать всем разные классы для блока, для ul, для li, для ссылок?

[Сергей delphinpro]

Senseich, Если у вас второе меню с незначительными отличиями, например другого цвета, то можно воспользоваться модификатором блока

.menu_color_orange {}
.menu_color_orange .menu__item {}
…

Если два совершенно разных меню, то разумеется другое имя блока

.navi {}
.navi__item {}
.navi__link {}
…

[Сергей delphinpro]

Паша Глеев,

menu__item--active

Потому что такой стиль предполагает булевы значения (Да/Нет).
Оригинальный нейминг использует модификаторы как булевы, так и вида Ключ_Значение, что, согласитесь, гораздо гибче.
Например
.menu--orange
Против
.menu_bg_orange
.menu_color_orange

второе более чётко описывает назначение модификатора.

[Senseich]

Сергей delphinpro,

Если у вас второе меню с незначительными отличиями, например другого цвета, то можно воспользоваться модификатором блока
.menu_color_orange {}
.menu_color_orange .menu__item {}

А как это на моём примере будет выглядеть, что-то туго доходит? ) Получается контекстность всё равно сохраняется: .menu__item должно лежать в .menu_color_orange , чтобы стили правильно сработали. Я так понял , что БЭМ придумали , чтобы отойти от этой зависимости вложенности. Или я вас не так понял?

[Сергей delphinpro]

Senseich, тут надо понять, что модификатор можно применить к блоку, а можно к элементу.
Иногда проще повесить один модификатор на блок и стилизовать через него элементы (а элемент — это неотделимая часть блока, так что он по-любому будет внутри). Например, когда через модификатор нужно изменить стили нескольких элементов. Если же нужно изменить стиль только одного элемента, можно и его модифицировать
.menu__item_color_pink {}

Здесь нет абсолютной истины. Придерживайтесь здравого смысла, без фанатизма.
Не надо писать селекторы трёх-черытёх уровневой вложенности. В то время, как два уровня блок_модификатор блок__элемент вполне допустимо. Об этом упоминается в описании нэйминга от Яндекса.

[Senseich]

Сергей delphinpro, а что касаемо активных элементов menu__item_state_active эти классы добавляются с помощью JS ? Почему вы у первого элемента списка поставили?

[Сергей delphinpro]

Senseich, просто показал, как можно выделить активный пункт меню. Обычно этот класс добавляется серверным скриптом при рендере страницы. Кто и как будет добавлять классы неважно.