Как правильнее задавать классы по BEM?

Question

[Aristotel Paskalov]

Подскажите пожалуйста, как правильнее задавать классы по БЭМ'у, в первом варианте, или втором?

1 вариант:

<header class="header">
    <div class="container">
        <div class="header__body">
            <img src="" alt="" class="header__logotype">

            <nav class="header__nav">
                <ul class="header__list">
                    <li class="header__item"><a href="" class="header__link"></a></li>
                    <li class="header__item"><a href="" class="header__link"></a></li>
                    <li class="header__item"><a href="" class="header__link"></a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

2 вариант:

<header class="header">
    <div class="container">
        <div class="header-body">
            <img src="" alt="" class="header-body__logotype">

            <nav class="header-body__nav nav-body">
                <ul class="nav-body__list">
                    <li class="nav-body__item"><a href="" class="nav-body__link"></a></li>
                    <li class="nav-body__item"><a href="" class="nav-body__link"></a></li>
                    <li class="nav-body__item"><a href="" class="nav-body__link"></a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

Comments

[Ankhena]

<header class="header">
  <div class="container">
    <nav class="header__nav nav">
      <a class="header__logo logo" href="">
        <img src="" alt="" class="logo__img">
      </a>
      <ul class="nav__list">
        <li class="nav__item"><a href="" class="nav__link"></a></li>
        <li class="nav__item"><a href="" class="nav__link"></a></li>
        <li class="nav__item"><a href="" class="nav__link"></a></li>
      </ul>
    </nav>
  </div>
</header>

[Сергей delphinpro]

Ankhena, nav__list - тоже самостоятельный блок. Вообще, конечно, логотип - это навигация по сути, но я бы не стал его объединять в общий блок с менюшкой.

[Ankhena]

Сергей delphinpro, да, согласна про nav__list
С лого - так гармоничнее разметка, чем была у автора, на мой вкус. Думаю, тут нет однозначного утверждения.

[Kovalsky]

Шёл 2021ый год, человечество пережило масштабную встряску вирусом, который неожиданно для всех распространился по планете после того как проник за гематоэнцефалический барьер какого-то дурачка молящегося на Оззи Озборна; в развитых странах за каждым углом обсуждаются планы свержения правительства; в Необъятной резьба на гайках становится всё мельче и мельче; дипфейк потерял всякий стыд и творит такое, что кровь стынет в жилах; этот список вкусностей, знание о которых лет 5 назад заставило бы глаза почти любого человека на земле округлиться, можно продолжать довольно долго,

В это время на тостере уже десятый год не перестают появляться вопросы о том как правильно именовать классы по методологии от которой уже даже сам Яндекс отказался в основных своих проектах, и это при том что вся инфа открыта, а примеров в интернетах миллионы. Ну это же как минимум странно, не?

По теме: БЭМ не заставляет вас каким-то конкретным образом именовать классы ваших блоков, БЭМ просто говорит что разделять сущности на блоки, элементы и модификаторы - это хорошо. Нет единого правильного по БЭМ способа именовать классы, ибо способ именования зависит от структуры элементов/блоков, а эту структуру придумываете вы. Как и сказал Realetive, оба варианта корректны, а вопрос не очень корректен: если вы хотите чтоб в вашем проекте блок навигации был самостоятельной сущностью которую можно было бы использовать в других блоках, то это второй вариант; нет - первый,

Answer 1

[Realetive]

Оба варианта корректны.

Answer 2

[Денис Инешин]

2 предпочтительней. Так как навигация вынесена в отдельную сущность.

В 1 варианте header__list и header__item - вообще непонятно что. Как понять что это меню? Названия еще и смысл должны нести.