Корректно ли по БЭМу создавать классы для отступов?

Question

[Barring]

В проекте есть несколько страниц с разными секциями. На разных страницах есть что-то в духе .services__about и .industries__about, т.е. на странице services секция about и на странице industries секция about (у каждой из них вёрстка разная).

И хоть вёрстка и разная, но отступы должны быть одинаковые. Как согласно БЭМу их вынести в какой-то отдельный класс? Ведь по правилам - отступы нужно задавать элементам, но в этой ситуации так не получится из-за того что это секции разных страниц и у секций (элементов) разные родители.

Можно ли создать какой-то вспомогательный блок section-about и присвоить ему нужные отступы? И потом применять миксом .services__about.section-about и .industries__about.section-about. Или как будет правильнее поступить? Либо же назвать этот вспомогательный блок .section-about-offset что бы прям максимально было понятно что к чему.

Comments

[Ankhena]

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

Answer 1

[Realetive]

Нет, вполне грамотное с точки зрения БЭМ решение — вы нашли повторяющийся паттерн и хотите его вынести в переиспользуемую сущность. Если этот паттерн повторяется ещё где-то, то смело делайте это самостоятельным блоком, как вы описали, но, может, обобщив, получится более абстрактное название. Если эти отступы — это «внешняя геометрия» (т. е. margin'ы), то правильнее это сделать не блоком, а элементом. Например, есть блок .page — «корневой» блок всей страницы (на теге body), а эти отступы тогда могут быть описаны в .page__section.

Comments

[Barring]

Ближайший общий и для одной и для второй страницы родительский элемент это .main, но между .main и блоками .services / .industries идут разные прослойки в виде лейаутов. И если спустя некую вложенность в духе
.main - .layout-default - .layout-default__container - .services
появится блок .services__about.main__about то будет же не особо логично что элемент main__about используется уже внутри какого блока .services

[Realetive]

Ничего страшного, что есть «прослойки». Визуально будет читаться очень логично:

.main
  …
    .services
      .services__about.main__about-layout

Т. е. этот код «говорит»: Что бы не было вместо блока services — если нужно сделать слой с известными отступами внутри main — вот готовый класс.

[Realetive]

Barring, особенно оправдано, если и блок industries тоже лежит внутри main.

[Barring]

Realetive, а какая альтернатива могла бы быть в случае отсутствия общего корневого класса у страниц? Или тогда всё равно необходимо присваивать какой-то класс для body и от него всё строить?

[Realetive]

Barring, если этот отступ прослеживается в нескольких разных блоках, то всё равно что-то общее у них есть (или это просто совпадение и есть смысл прописать одинаковые значения в элемент about каждого из блоков). Это может быть не родительский блок, а микс на сам services (и industries):

.services.section-about
  …
    .services__about.section-about__paddings

В отличие от микса на сам элемент services__about ( .services__about.section-about ), мой пример позволяет «законно» использовать margin'ы в стилях section-about__paddings (потому что просто у блока не должно быть «внешней геометрии» типа margin'ов)

[Realetive]

Сейчас может произойти «щелчок», после которого вся идея БЭМ становится ясна и логична (и оправдана с точки зрения многословности в длинных именах классов). Мы, БЭМ-разработчики, называем это «БЭМом головного мозга» — тебе всё понятно, а остальные считают за сумасшедшего )))

[Barring]

Realetive, изначально была идея миксовать классы что бы в итогу вышло следующее :

<div class="services categories">
  <div class="services__about categories__about"></div>
</div>

<div class="industries catgegories">
  <div class="industries__about categories__about"></div>
</div>

В этом примере добавляется миксом блок categories (общая, скажем так, тема для industries и services) и потом к внутренним элементами миксуется элемент categories__about. Но я счёл не особо удобным такую констркуцию ввиду постоянной необходимости прописывания этого микса.

Но сейчас, как понимаю, это вполне себе имеющий право на жизнь вариант, да?)

[Realetive]

Barring, абсолютно верно! Причём у класса categories в стилях вообще может быть пусто (пока) — он лишь отражает «семантику» — что есть что-то обособленное (как эти паддинги, хоть они даже не в самом блоке описан, а в элементе).

[Barring]

Realetive, благодарю за уделённое время и объяснение всех моментов. И можно ещё завершающим аккордом, проверочный момент уточнить. Есть всё те же страницы .services и .industries. У них есть свои разные секции и в этих секциях есть title (.services-about__title, .services-summary__title и тд).
Если есть необходимость задать этому тайтлу одинаковые отступы (margin) на разных страницах, тогда правильным решением будет поступить вот так? :

<div class="services">
      <div class="services__about services-about categories-section">
        <div class="services-about__title categories-section__title">some title text</div>
      </div>
    </div>

.categories-section__title {
  margin-bottom: 20px;
}

[Realetive]

Barring, если этот отступ будет использоваться на других сущностях (не только на services-about__title), то да. Если это специфично именно для services-about__title именно на этой странице, то логичнее модификатор:

на самом элементе:

.services
  .services__about
    .services-about__title.services-about__title_with-margins

или на блоке (тогда свойства описываются через «каскад»):

.services_view_with-title
  .services__about
    .services-about__title

/* CSS */
.services-about__title {
  margin: 1em;
}

.services_view_with-title .services-about__title {
  margin-top: 2em
}

[Realetive]

Но без дизайна мои утверждения — лишь догадки.

[Barring]

Realetive, спасибо ещё раз, отступ будет использоваться и на других сущностях тоже, так что вроде как всё понятно и в голове всё плюс - минус устаканилось. Всего вам наилучшего)

[Barring]

Realetive, сейчас ещё пришел в голову вариант использования переменных, учитывая что мне нужен лишь отступ, т.е. создать какую-то переменную --categories-about-margin и просто использовать ее где нужен отступ, но подозреваю что это не особо бэмовское решение

[Realetive]

Да. Это «неявное наследование», БЭМ за то, чтобы всё было максимально явным — чтобы беглый взгляд на структуру классов в разметке дал всю картину «что тут думал автор».