Правильно ли я понял основые принципы БЭМа?

Question

[polnyj0]

Проверьте, правильно ли я понял принципы БЭМа. Вот, например, имею следующего вида header

В хедере располагается три других блока: logo, menu и info. Вот как я рассуждаю - являются ли данные блоки элементами для блока header? Нет, не являются, т.к. "Элемент – это часть блока, отвечающая за отдельную функцию. Он может находиться только в составе блока и не имеет смысла в отрыве от него." (с оффсайта БЭМа). Любой из этих элементов мы может вынести из блока header (например, расположить меню в сайдбаре справа от контента). Соответственно, мы даем им обычные, не составные имена классов.
А вот уже каждый пункт меню - является элементом для блока меню и его класс я именую: menu__item. Если мне нужно сделать особый стиль для активного пункта меню, добавляется класс-модификатор: menu__item_curren_yes.
А как быть в случае, в меню есть подменю, т.е.

<ul class="menu">
	<li class="menu__item">Пункт</li>
	<li class="menu__item">Пункт</li>
	<li class="menu__item">Пункт с подменю
		<ul class="???">
			<li class="???">Пункт подменю</li>
			<li class="???">Пункт подменю</li>
			<li class="???">Пункт подменю</li>
		</ul>
	</li>
	<li class="menu__item">Пункт</li>
</ul>

Если стиль пунктов подменю аналогичен стилю пунктов основного меню, логично (в стандартной верстке) задать li тот же класс menu__item. Предположим, пункты подменю должны быть несколько сдвинуты вправо. Тогда, задаем ul класс, например, submenu, в стилях этого класса указываем необходимую величину отступа. А как в этом случае правильно поступить с точки зрения концепции БЭМ? Ведь как я понял, в случае верстки по БЭМу, у каждого блока/элемента страницы должен быть свой уникальный класс.

Answer 1

[Константин Величко]

Уж незнаю что вы хотите сделать, но вот такой разметки хватит на что угодно.
И БЭМ это не способ именования классов. Нужно смотреть еще css, скорее всего именно там самые серьезные ошибки.

<ul class="menu">
	<li class="menu__item"><a href="#">Пункт</a></li>
	<li class="menu__item menu__item_active"><a href="#">Пункт</a></li>
	<li class="menu__item menu__item_submenu">
		<a href="#">Пункт с подменю</a>
		<div class="menu__submenu">
			<ul class="submenu">
				<li class="submenu__item"><a href="#">Пункт подменю</a></li>
				<li class="submenu__item"><a href="#">Пункт подменю</a></li>
				<li class="submenu__item submenu__item_active"><a href="#">Пункт подменю</a></li>
			</ul>
		</div>
	</li>
	<li class="menu__item">Пункт</li>
</ul>

В хедере располагается три других блока: logo, menu и info.

Я так понял вы подхватили болезнь БМ, новички всегда в это вляпываются

<div class="header">
	<div class="header__logo">
		<div class="logo"></div>
	</div>
	<div class="header__menu">
		<div class="menu"></div>
	</div>
	<div class="header__info">
		<div class="info"></div>
	</div>
</div>

Comments

[polnyj0]

Т.е. подменю является элементом для блока menu? А класс menu__item_submenu я так понимаю модификатор, который указывает, что это не стандартный элемент menu__item, а модифицированный наличием подменю? Какие стили в этом случае прописываются для класса menu__item_submenu а какие для классов menu__submenu и submenu?
По моменту с header__logo, header__menu и header__info, также, не понимаю, почему эти блоки являются элементами для header. Та же самая цитата, что приводил выше с сайта БЭМа - "Элемент – это часть блока, отвечающая за отдельную функцию. Он может находиться только в составе блока и не имеет смысла в отрыве от него." Ведь можно же любой из этих блоков убрать из хедера, и он будет иметь свой смысл в любой части страницы.

[Константин Величко]

«Какие стили в этом случае прописываются для класса menu__item_submenu а »
Никакие, это будет вмешательство в другй блок и для submenu тоже ничего не нужно. Вообще все зависит от ситуации, мы сейчас обсуждаем что то очень абстрактное.

«По моменту с header__logo, header__menu и header__info, также, не понимаю, почему эти блоки являются элементами для header. »
это не блоки а элменты, в которых уже лежат свои блоки. нужны они для того чтобы не позицонировать сами блоки

[Константин Величко]

Надеюсь так понятней принцип? jsfiddle.net/Zoxon/8w1ju20n

[polnyj0]

Да, спасибо, похоже начинаю понемногу прозревать. Единственный момент - "Вообще все зависит от ситуации, мы сейчас обсуждаем что то очень абстрактное", не могли бы Вы привести какие нибудь случайные примеры ситуаций и какие различия при этих ситуациях у нас будут в html и стилях?

[Константин Величко]

Например может быть сулчай когда по наведению на menu__item нужно будет менять стиль submenu__item

[polnyj0]

В этом случае нам никуда не деться от каскада и класс будет записываться ".menu__item:hover .submenu__item". Верно? Или добавляется класс - модификатор и записывается "menu__item_hovered:hover .submenu__item"?

[Константин Величко]

Полный отказ от каскада не стоит пропагандировать и использовать, например в случае submenu__item a вполне нормальная вещь, и ничего в этом страшного нет.
Важнее по максиму стараться сохранить изолированность блоков. Иногда приходится прописывать поведение для элементов других блоков при изменении состояния родительского блока (элемента). Это тоже вполне нормально, просто этого нужно по максимуму избегать.
Просто изначальная идеология css не совпадает с идеологией БЭМ.

Answer 2

[Maksim Zverev]

Там нет строгих жесткуих правил вне bem tools, это просто соглашение о подходе к именованию классов.
Вот еще можно почитать: habrahabr.ru/company/yandex/blog/234905
И правильней было бы задать вопрос на их основном форуме.

Так же вот вам для примера реальный проект сделанный на бэм с испольхованием bem tools
https://github.com/alexbaumgertner/hunter-boat

Answer 3

[Олег Черр]

Что касается именования классов, то я бы сделал так:

<ul class="l-menu">
  <li class="l-menu-item">Пункт</li>
  <li class="l-menu-item l-menu-item_active">Пункт</li>
  <li class="l-menu-item l-menu-item_submenu">
    Пункт с подменю
    <ul class="l-menu-submenu">
      <li class="l-menu-subitem">Пункт подменю</li>
      <li class="l-menu-subitem">Пункт подменю</li>
      <li class="l-menu-subitem l-subitem_active">Пункт подменю</li>
    </ul>
  </li>
  <li class="l-menu-item">Пункт</li>
</ul>

Вообще, не нужно бояться дорабатывать методологии "под себя". Удобство разработки и поддержки – вещь в значительной степени субъективная.
Лично я использую свой доработанный бэм-подход и он мне очень нравится.

Answer 4

[Максим Гатилин]

На нашем блоге есть статья - КБЭМ - Контейнер, Блок, Элемент, Модификатор. Довольно подробненько описано)