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

Question

[stasov1]

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



Вариант 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>

Comments

[Сергей]

1 более по БЭМ

Answer 1

[Дмитрий Кравченко]

<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>

Comments

[AlikDex]

Можно вопрос? А почему в

• класс social-list стоит на втором месте, а не на первом? Ведь он тем самым нарушает общий порядок и концепцию =)

[Дмитрий Кравченко]

AlikDex: я рад, что ты спросил

[Дмитрий Кравченко]

AlikDex: на самом деле нет

Answer 2

[v-orlov]

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

<div class="logo page-header__logo">
...
</div>

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

Comments

[Сергей delphinpro]

- я не люблю кошек.
- вы просто не умеете их готовить!

:)

Answer 3

[Андрей Хохлов]

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

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

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

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

Избавляет от многой головной боли, типо как бы назвать очередной блок по бэму, который просто колонка.

Comments

[Loot]

и будут проблемы, если ВДРУГ надо будет поменять .col-md-4 на .col-md-3 к примеру

[Андрей Хохлов]

Cesavel: имеете в виду что придётся менять на всех страницах? Отчасти согласен, но это структура все же. Header, footer и т. .п. с большой вероятностью будут представлены в отдельных файлах (на этапе верстки тоже, ибо jade).

Answer 4

[Максим Гатилин]

Недавно написал статью как мы в команде используем БЭМ-именование.