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

Question

Иван @BenderIsGreat34

junior front-end

HTML
БЭМ

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

Проверьте пожалуйста на корректность БЭМ. Сказали, что .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>

Вопрос задан более трёх лет назад
1012 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

Алекс Глебов @SkiperX Куратор тега HTML

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

Написано более трёх лет назад
Иван @BenderIsGreat34 Автор вопроса

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега HTML
Не БЭМ:
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>
Написано более трёх лет назад