Оформление навигации по методологии БЭМ?

Question

[kimoko]

Допустим я имею следующую структуру навигации:

<nav class="menu">
  <a class="menu__item" href="#!">
    <i class="menu__icon"></i>
    Main
  </a>
</nav>

.menu__item {
  padding: 1rem 2rem;
}

.menu__icon {
  margin-right: 0.5rem;
}

Блок "menu" имеет два элемента - "menu__item" и "menu__icon". Выглядит так, словно это два независимых элемента того же блока. Значит ли это, что "menu__icon" должен быть способен существовать вне "menu__item"? Если да, то мой стиль на меню__айкон совершенно не в тему, т.к. он актуален только внутри меню__айтем... Поэтому встаёт вопрос - не должен ли в данном случае меню__айтем быть блоком типа link -> link__icon?

А что на счёт такой структуры?

<nav class="menu">
	<ul class="menu-list">
		<li class="menu-list__item">
			<a class="link" href="#!">
				<i class="link__icon"></i>
				Main
			</a>
		</li>
	</ul>
</nav>

Мне она больше нравиться и выглядит логичнее, т.к. в menu-list__item можно пихнуть что угодно... Но тогда стилизация того чего-угодно, в данном случае "link", выглядит не совсем правильно...

// По-умолчанию
.link {
  text-decoration: underline;
}

// В контексте меню_айтема.
.menu-list__item .link {
  padding: 1rem 2rem;
  text-decoration: none;
}

Помогите успокоиться! Благодарю!

Answer 1

[Realetive]

Выглядит так, словно это два независимых элемента того же блока. Значит ли это, что "menu__icon" должен быть способен существовать вне "menu__item"?

— Нет. В смысле, что он «не должен». Структуру вложенности задаёт блок. Блок menu «утвердил», что menu__icon лежит внутри menu__item. Если это поменяется, это уже может быть выражено через модификацию блока menu:

<nav class="menu menu_outside-icon">
  <i class="menu__icon"></i>
  <a class="menu__item" href="#!">
    Main
  </a>
</nav>

.menu_outside-icon .menu__icon {
  margin-right: 0;
}

или модификацию элемента:

<nav class="menu">
  <i class="menu__icon menu__icon_outside"></i>
  <a class="menu__item" href="#!">
    Main
  </a>
</nav>

.menu__icon_outside {
  margin-right: 0;
}

По поводу альтернативной структуры — на самом деле вам нужны миксы. Т. е. вы хотите на одном теге выразить и то, что это иконка (блок icon), и то, что у неё есть какая-то внешняя геометрия, обусловленная вложенностью в другой блок ( т. е. что она одновременно ещё и menu__icon):

<nav class="menu">
  <a class="link link_no-decoration menu__item" href="#!">
    <i class="icon icon_size_m menu__icon"></i>
    Main
  </a>
</nav>

.menu__item {
  padding: 1rem 2rem;
}

.menu__icon {
  margin-right: 0.5rem;
}

.link {
  color: blue;
}

.link_no-decoration,
.link_no-decoration:hover,
.link_no-decoration:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.icon {
  color: inherit;
  line-height: 1;
}

.icon_size_m {
  width: 1.5rem;
  height 1.5rem;
}