@greencost

Два вопроса по БЭМ — как называть и выносить ли отдельно класс container?

Добрый день. Есть два, как мне кажется, простых вопроса, связанных с БЭМом, но никак не могу определиться - как сделать лучше.

1) Есть "двухэтажный header", где отдельным блоком - контакты, а отдельным - логотип и меню. Примерно вот так:
60813caf8c4d9830902656.png
Как, по-вашему, лучше назвать эти блоки? .header-top и .header-lower?

2) Есть любой блок, у которого структура по своей сути - это container > row > col*(items). Как лучше её организовать с т.з. БЭМ?

<div class="news">
  <div class="news__container">
    <div class="news__row">
      <div class="news__item">
        <!-- контент -->
        <!-- стили подтягиваем через sass -->
      </div>
    </div>
  </div>
</div>

<!-- ИЛИ -->

<div class="news">
  <div class="container">
    <div class="row">
      <div class="news__item">
        <!-- контент -->
      </div>
    </div>
  </div>
</div>

<!-- ИЛИ -->

<div class="news">
  <div class="news__inner container">
    <div class="news__row row">
      <div class="news__item">
        <!-- контент -->
      </div>
    </div>
  </div>
</div>
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
Get-Web
@Get-Web
Front-End Developer
.header-top и .header-lower

Так лучше не делать. Старайтесь не использовать прилагательные. Смысл БЭМ в переиспользовании и то что сегодня было вверху, может оказаться внизу и наоборот, после таких преобразований, когда top окажется где-то в центре как минимум возникнет диссонанс.
Логичнее вынести в 2 независимых блока, прекрасно подойдут названия такие как panel, bar, info, navigation, если хотите зарезервировать эти имена для других целей, то можно использовать префиксы и сочетания ibar, i-bar, info-panel. Оба эти блока можно обернуть в единый header и миксовать class="header__panel panel", хотя я бы их полностью разделил, так как верхняя панель, явно может быть переиспользована где-то в футере.

2) Есть любой блок, у которого структура по своей сути - это container > row > col*(items). Как лучше её организовать с т.з. БЭМ?

Тут нужно видеть с чем работать, но в таком контексте лучше использовать микс:
<div class="news">
  <div class="news__container container">
    <div class="news__row row">
      <div class="news__item">
        <!-- контент -->
      </div>
    </div>
  </div>
</div>

Таким образом мы можем модифицировать row и container в контексте необходимого блока и понимать назначение классов.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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