Проверить на ошибки БЭМа?

Question

[Иван]

Проверьте пожалуйста на корректность БЭМ. Сказали, что .header__adaptive-menu-link - это элемент без блока, может тогда стоит переименовать в .header-menu__adaptive-link или просто оставить .adaaptive-menu-link? Если я правильно понимаю, то когда я уберу имя блока, то становится непонятно, к чему этот элемент относится, ведь таких адаптивных меню может быть чисто теоретически много

<header class="main-header">
    <div class="container header-menu">
      <div class="logo"><a href="#"><img src="img/content/logo.png" alt="Логотип"></a></div>
      <div class="header__apadtive-menu-link">
        <span>Menu</span>
      </div>
      <nav class="header-menu__nav">
        <div class="header__adaptive-menu_background">
          <ul class="header-menu__list">
            <li>
              <a class="header-menu__links" href="#">About</a>
            </li>
            <li>
              <a class="header-menu__links" href="#">Contact</a>
            </li>
            <li>
              <a class="header-menu__links" href="#">Catalog</a>
            </li>
            <li>
              <a class="header-menu__links" href="#">Blog</a>
            </li>
          </ul>
        </div>
        <a class="header-menu__login-link" href="#">Sign in</a>
      </nav>
    </div>
  </header>

Comments

[Алекс Глебов]

у тебя тут один блок - header. че выдумывать?

[Иван]

Алекс Глебов, но ведь дальше могут быть ещё другие header

[Ankhena]

Не БЭМ:
1. div вокруг логотипа - лишний
2. span вокруг Menu - лишний (возможно оставить из соображений доступности, но тогда должен быть класс visually-hidden)
3. div вокруг списка со ссылками - лишний
4. header-menu__login-link вероятнее всего эта одинокая ссылка превратится во что-то большее, блок в котором будет написан логин, ссылка/кнопка на выход, ссылка на профиль и т.д. Это нужно узнать и предусмотреть в разметке.

Теперь можно будет перейти и к БЭМ
1. Основной блок это .header (не надо писать лишнего, если будут другие хедеры, там и назовете длиннее).
2. header-menu вероятнее, просто некая обертка, выполняющая роль центровщика, тогда ей достаточно только класса .container
3. Для меню нужен микс, это одновременно и элемент блока header и самостоятельный блок. Внутри него всё будет плясать от этого блока.
4. header__apadtive-menu-link зачем про адаптивность что-то говорить? Если есть варианты, то это модификатор. И, наверное, не link, а btn

Это не окончательный вариант с учётом всего вышесказанного. Да и макет вы видите, а я нет.

<header class="header">
  <div class="container">
    <a href="#" class="header__logo logo">
      <img class="logo__img" src="img/content/logo.png" alt="Логотип">
    </a>
    <div class="header__menu-btn btn btn--burger">
      <span class="visually-hidden">Menu</span>
    </div>
    <nav class="header__menu">  
        <ul class="header__menu-list menu">
          <li>
            <a class="menu__link" href="#">About</a>
          </li>
          <li>
            <a class="menu__link" href="#">Contact</a>
          </li>
          <li>
            <a class="menu__link" href="#">Catalog</a>
          </li>
          <li>
            <a class="menu__link" href="#">Blog</a>
          </li>
        </ul>

      <a class="header__login-link" href="#">Sign in</a>
    </nav>
  </div>
</header>

Answer 1

[Даниил Маслов]

Пользуйтесь этим ресурсом для базовой проверки.