Как правильно по БЭМ?

Добрый день, прощу прощения, может глупый вопрос, но как будет более правильно сверстать с именованием классов по БЭМ ???

420a1597b0b746358f3a87893def4a84.png

Вариант 1.
<header class="page-header">
  <div class="page-header__logo">
    <div class="logo">
      ...
    </div>
  </div>
  <div class="page-header__navigation">
    <nav class="menu">
      ...
    </nav>
  </div>
  <div class="page-header__social">
    <ul class="social-list">
      ...
    </ul>
  </div>
</header>


Вариант 2.
<header class="page-header">
    <div class="logo">
      ...
    </div>
    <nav class="menu">
      ...
    </nav>
    <ul class="social-list">
      ...
    </ul>
</header>
  • Вопрос задан
  • 805 просмотров
Пригласить эксперта
Ответы на вопрос 4
<header class="page-header">
    <div class="logo page-header__logo">
      ...
    </div>
    <nav class="menu page-header__navigation">
      ...
    </nav>
    <ul class="page-header__social social-list">
      ...
    </ul>
</header>
Ответ написан
@v-orlov
понимаю, что так правильно по бэм, но, какой смысл писать два класса одному диву, если на один из классов почти наверняка не будет навешан стиль:
<div class="logo page-header__logo">
...
</div>


а когда открываешь верстку и ужасаешься количеству классов, оказывается, что некоторые классы присвоены "чтобы были по бэм"
Ответ написан
Если блок относится непосредственно к родителю и не может существовать без него, то его необходимо сделать его элементом.

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

Меня раньше бесили всякие header__left и footer__right.
Ведь по сути они одинаковые, и тот и тот например 60% ширины и т.д.
Сейчас я не стесняюсь юзать сетку и размечать блоки классами от неё

.header
  .container
    .row
      .col-md-4
        .logo


Избавляет от многой головной боли, типо как бы назвать очередной блок по бэму, который просто колонка.
Ответ написан
gatilin222
@gatilin222
Frontend-разработчик
Недавно написал статью как мы в команде используем БЭМ-именование.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы