Какой вариант именования более правильный (БЭМ)?

Question

[Barring]

Есть несколько моментов, которые спустя время так и не могут устаканиться в моей голове.
Какой вариант более правильный из представленных ниже? Или более правильного и вовсе нет и каждый пишет как ему удобно?

1й вариант - максимально плоская структура без служебных классов
2й вариант - менее плоская структура со служебными классами
3й вариант - структура классов точно отображает вложенность элементов

<div class="main">
  <nav class="main__nav">
    <ul class="main__nav-list">
      <li class="main__nav-item">
        <a href="#" class="main__nav-link">Home</a>
      </li>
      <li class="main__nav-item">
        <a href="#" class="main__nav-link">Work</a>
      </li>
      <li class="main__nav-item">
        <a href="#" class="main__nav-link">About us</a>
      </li>
    </ul>
  </nav>
</div>

/ / / / /

<div class="main">
  <nav class="main-nav">
    <ul class="main-nav__list">
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">Home</a>
      </li>
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">Work</a>
      </li>
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">About us</a>
      </li>
    </ul>
  </nav>
</div>

/ / / / /

<div class="main">
  <nav class="main-nav">
    <ul class="main-nav-list">
      <li class="main-nav-list-item">
        <a href="#" class="main-nav-list-item__link">Home</a>
      </li>
      <li class="main-nav-list-item">
        <a href="#" class="main-nav-list-item__link">Work</a>
      </li>
      <li class="main-nav-list-item">
        <a href="#" class="main-nav-list-item__link">About us</a>
      </li>
    </ul>
  </nav>
</div>

Answer 1

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

Второй вариант более правильный, но вы вложили в него неправильный смысл, вы косвенно привязали main-nav к контексту main и это очень заметно в 3-м примере, где вы эту проблему гиперболизировали, 3-й пример ужасен, никогда так не делайте. 1-й пример правильный по именованию, но не всегда будет правильный по структуре, так как навигация это скорее всего отдельный блок. В результате более правильно, коротко и лаконично будет примерно так:

<div class="main">
  <nav class="main__nav nav">
    <ul class="nav__list">
      <li class="nav__item">
        <a href="#" class="nav__link">Home</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">Work</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">About us</a>
      </li>
    </ul>
  </nav>
</div>

Вам правильно сказали про миксы, но более правильно делать элемент-модифиткатор с названием блока к которому миксуем, то есть main__nav nav и если делать микс по вашей схеме, то получится вот такая тавтология main__main-nav main-nav, а если сделать 2 микса (что иногда тоже бывает) в 3-ем примере, то становиться плохо main__main-nav-list main-nav__main-nav-list main-nav-list и возможно на таком примере вам станет более понятено, почему не надо так делать и какую задачу решает БЭМ

каждый пишет как ему удобно?

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

Answer 2

[xdevelx]

3й вариант - структура классов точно отображает вложенность элементов

Не пойдет - пункты меню отдельно от меню никто не переиспользует, да и li вне ul не возможны. Такое только возможно, если элементы имеют "богатый внутренний мир" (достаточно сложны, чтобы их вынести в отдельные блоки). Но здесь не тот случай.

1 и 2 варианты практически идентичны и оба применимы, но я бы выбрал 2 вариант, так как меню все таки лучше вынести в отдельный блок.

Ну и про миксы не забывайте - блок main-nav может быть и элементом родителя main__nav и вся внешняя геометрия (внешние отступы и позиционирование) применится к элементу .main__nav, а не к блоку .main-nav

<div class="main">
  <nav class="main-nav main__nav">
    <ul class="main-nav__list">
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">Home</a>
      </li>
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">Work</a>
      </li>
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">About us</a>
      </li>
    </ul>
  </nav>
</div>

Comments

[Barring]

Как возможно определить условную грань, когда элементы становятся достаточно сложными что бы выносить их в отдельные блоки? (даже если не планируется их переиспользовани где-либо ещё)

[xdevelx]

Barring, Банально, если у них собственных стилей со всеми состояниями и модификаторами становится очень много. Можно выносить в отдельный блок. К примеру инпут текстовый у формы или чекбокс, или группа радиокнопок. Хотя я допускаю, что и пункт меню в некоторых случаях станет блоком, ну либо сабменю.