Можно ли так писать в bem?

Question

[wakenbyWork]

<div class="header">
  <div class="header__left"></div>
  
  <div class="header__right right-lite">
    <div class="right-lite__control"></div>
    <div class="header__btn"></div>
  </div>
</div>

Выдуманный пример, просто не понимаю можно ли писать элементы одного блока внутри другого, по итоге в дочернем блоке родные элементы и элементы родителя. Можно ли так?

<div class="header">
  <div class="container">
    <div class="header__logo"></div>
    <nav class="header__nav"></nav>
  </div>
</div>

А это реальный пример, вот важно узнать так ли можно?

Answer 1

[Вадим]

В целом, вроде всё легально(кроме семантики :-) ).
Но зависит от того, как Вы дальше стили пропишите.
https://ru.bem.info/methodology/key-concepts/#%D0%...
https://en.bem.info/forum/4/

то есть header__btn никак не должен зависеть от right-lite.
header__right - про позиционирование внутри header, никак не должно быть связанно с right-lite

<div class="header__right right-lite"> - яркий пример классического бэм микса. То есть по факту Вам нужен блок right-lite, но для позиционирования внутри header Вы миксуете его как элемент header__right

Comments

[wakenbyWork]

Извините на настойчивость, данный пример валидный?

<div class="header">
  <div class="container">
    <div class="header__logo"></div>
    <nav class="header__nav"></nav>
  </div>
</div>

[Вадим]

wakenbyWork, Да, валидный.
У Вас тут есть отдельный блок header, отдельный блок, отвечающий за ширину контейнера.
Однако, если container у Вас делает что-то ещё, кроме ограничений по ширине, то тут уже нужно разбирать конкретный кейс.

[wakenbyWork]

Нет, контейнер только для ограничений по ширине.

Но иногда контейнер должен иметь display: flex. Я в таком случае делаю микс. Блок container отвечает за ширину, а элемент header__containe отвечает за display: flex

.container {
  width: 100%;
  max-width: 1208px;
}

.header {
  &__container {
    display: flex;
  }
}

<div class="header">
  <div class="header__container container">
    <div class="header__logo"></div>
    <nav class="header__nav"></nav>
  </div>
</div>

[Вадим]

wakenbyWork, ну звучит, на мой взгляд, прям как надо.

[Ilya Olovyannikov]

wakenbyWork, отличный пример. Продолжай в том же духе! :)

[ForSureN1]

wakenbyWork, Лично я привык все таки отделять container условно от header__container, как то более лаконично выглядит, потому что сам по себе контейнер это своего рода глобальная переменная

[IIIu6ko]

ForSureN1, Сам container - это такой же блок, как и header. Между ними разницы не должно быть.
Вся суть как раз в простоте.

[ForSureN1]

ну сам header используется 1 раз, а container множество

[ForSureN1]

IIIu6ko, в таком же случае, мы можем и написать header header__container container в одном блоке, если вы говорите о простоте

[Ilya Olovyannikov]

ForSureN1, не можем, потому что стили у header и container разные совсем. А если нам надо стилизовать контейнер блока, то header__container container подойдет отлично.

[ForSureN1]

Ilya Olovyannikov, разные стили? а есть ли они вообще у header ?

[IIIu6ko]

ForSureN1, Так неважно сколько раз используется header, если он независимый, то его можно использовать сколько угодной раз и где угодно.

Я наоборот всегда миксую, чтобы не нагружать основной блок. К примеру:

<header class="header">
    <div class="wrapper header__wrapper"></div>
</header>

В таком случаи, если мне понадобиться дописать какие-то кастомные стили для wrapper, которые используются только в header, то я их буду писать именно для header__wrapper.
В ином случаи, если эти кастомные стили используются не только в header, то стоит уже сделать модификатор для самого wrapper.

[Ilya Olovyannikov]

ForSureN1, вполне себе возможно

[ForSureN1]

IIIu6ko, я не говорил что миксовать это плохо, просто условно говоря, сам контейнер имеет боковые padding по 10px, и мы миксуем с header__container который будет иметь верхние и нижние отступы, поэтому я предпочитаю использовать вот такой способ

<div class="block">
    <div class="container">
        <div class="block__container content"></div>
    </div>
</div>

Где в свою очередь content своего рода глобальный класс который будет иметь одинаковые верхние и нижние отступы у всех секций, а уже с block__container будем делать все что угодно

[IIIu6ko]

ForSureN1, Давайте на вашей терминологии поговорим. В БЭМ все блоки глобальные и могу переиспользоваться. Он для этого собственно и создан.

По поводу примера. А в чём проблема сделать вот так?

<div class="block">
    <div class="container block__container content"></div>
</div>

.container {
    padding: 0 15px;
}

.content {
  padding-top: 40px;
}

.block__container {
    padding-bottom: 40px;
}

Просто дело привычки.

[Вадим]

IIIu6ko,

А в чём проблема сделать вот так

div class="container block__container content">
2 бэм блока(container + content) на одном html элементе не миксуются.

[ForSureN1]

IIIu6ko, Ну я же объяснил почему я разделяю контейнер и следующий блок, потому что container имеет боковые padding, а content верхние и нижние, и когда мы посмотрим на блок, будет понятно что контейнер находится на уровень выше, а если все смиксовать, то получится своего рода каша )

[IIIu6ko]

Вадим, Где такое написано?

[Вадим]

IIIu6ko, ну, вот прям в прямую - нигде(я не встречал). Более того, на форуме бэма есть обсуждения, в которых говорится что можно(правда не знаю насколько они в итоге были приняты авторами). Однако, как мне кажется, это "написано" между строк в самой концепции - концепции разделения вёрстки на переиспользуемые блоки.
Если в разметке одна ДОМ нода содержит на себе 2 бэм блока, значит декомпозиция вёрстки на блоки была произведена недостаточно "глубоко".
Ну и второй момент, хоть это всё же не одно и то же, однако, выделение бэм блока в компонент (веб компонент, реакт\вью компонент и тд) с учётом предлагаемой по бэм файловой структуры, делает если и не невозможным, то, как минимум, сомнительным миксование двух бэм блоков на одной ноде.
В таком случае получается, что где-то должен быть абстрактный бэм блок без вёрстки, существующий только в css и миксующийся уже на другие бэм блоки непосредственно в месте их использования.

[Вадим]

IIIu6ko, разве что я бы сделал одну поправку, что есть конечно случаи, в которых это вполне себе выглядит легально. То есть это какой-то хелпер-блок. Аля clearfix или что-то вроде того

[Вадим]

IIIu6ko, О чём, к слову, есть всё же информация в офф документации: https://ru.bem.info/methodology/faq/#%D0%BA%D0%B0%...

Если требуется вынести CSS-свойство за пределы одного блока и применять его к разным БЭМ-сущностям в проекте, необходимо создавать отдельный блок, реализованный в технологии CSS. После чего совместить реализацию разных блоков с помощью миксов.

[IIIu6ko]

Вадим, Со всем согласен.
Тут хочешь не хочешь будешь использовать онли css блоки, иначе будет дублирование стилей. Например: wrapper, button, link и т.д., которые просто миксуются в уже готовые блоки. Хотя, это по сути создаёт зависимость от них.