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

Question

[greencost]

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

1) Есть "двухэтажный header", где отдельным блоком - контакты, а отдельным - логотип и меню. Примерно вот так:

Как, по-вашему, лучше назвать эти блоки? .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>

Comments

[Сергей delphinpro]

.page-topbar
.page-header

[Сергей delphinpro]

2) третий вариант, только зачем вводить еще одно имя для контейнера? Чтобы путаться?

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

[greencost]

Сергей delphinpro, ещё один класс нужен, потому что .container - это только контейнер, но там ведь и другие свойства, характерные только для конкретно этого блока (тот же bg). Или вы конкретно про нейминг?

[Сергей delphinpro]

greencost, я про имя: .news__inner.container VS .news__container.container

[maralov]

.page-topbar
.page-header

Сергей delphinpro, рискну предположить, что верхняя и нижняя части - это элементы блока хедер. Они врядли будут где-то использоваться по отдельности. по этому:
.header - блок
и его элементы .header__top .header__body

[Сергей delphinpro]

maralov, разумно

[greencost]

Сергей delphinpro, да, maralov прав - это элементы одного блока .header.

я про имя: .news__inner.container VS .news__container.container

Интересный вопрос. Мне, как раз, кажется менее логичным .news__container.container. Потому что в ассоциациях container - это только про, собственно, контейнер, а inner/wrapper - это уже про наполнение. Очень субъективно, согласен, я попробую присмотреться к вашему варианту. Идею про миксы понял.

[maralov]

Сергей delphinpro, ещё один класс нужен, потому что .container - это только контейнер, но там ведь и другие свойства, характерные только для конкретно этого блока (тот же bg). Или вы конкретно про нейминг?

greencost, все верно, .container это переиспользуемый блок, у которого очевидная задача - ограничить ширину и отцентровать (скорее всего=)) А делать Микс для .контейнера или не вижу смысла... тут нужно думать.... Насчет bg то, если он уникальный для блока .news то прописывай в стилях, если фон повторяешься то этому блоку добавляется вспомогательный класс типа .bg-primary или тп

Answer 1

[Виталий Першин]

.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 в контексте необходимого блока и понимать назначение классов.

Comments

[greencost]

А если мне не нужно, например, никак модифицировать .row? И этот класс нужен только для отрицательных margin (классическая сетка по аналогии с бутстрапом)? Логично ли тогда совсем убрать .news__row?

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

[Виталий Першин]

greencost, Можете не писать, но лучше и практичнее сразу написать класс-микс, даже если он сейчас не используется, потом в случае чего не придется лезть в разметку, просто будете править css

[greencost]

Виталий, спасибо!