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

Question

[Shimpanze]

Для данной разметки, какой из вариантов классов является верным?

Разметка:

<div class="?">
    <div class="?"></div>
    <div class="?"></div>
</div>

С тире:

.poster-grid {}
.poster-item {}

Или с нижним подчёркиванием:

.poster_grid {}
.poster_item {}

Comments

[Вадим]

недостаточно информации, но, предположим, что внешний див у вас сетка, внутренние - элементы, и тогда ответ такой:

1) Если предположение верно, то в сетке вообще о постерах ничего не должно быть. Должно быть что-то типа просто <div class="grid"> или с модификатором, говорящем о двух колонках: <div class="grid grid_col_2">. Ну на худой конец <div class="grid grid_type_posters"> если это какая то уникальная сетка не повторяющаяся в рамках проекта никогда и нигде.
2) Нижнее подчёркивание или тире - это на Ваш выбор, что использовать для разделения слов. Просто тогда нужно использовать разные разделители для сущностей, чтобы не пересекались с разделителем слов.
По классической версии нижнее подчёркивание используется для разделения модификатора.
3) Зачем Вам слово -item тоже не ясно.

итого:

<div class="grid">
    <div class="poster"></div>
    <div class="poster"></div>
</div>

[Shimpanze]

Вадим, Спасибо! Оформите ответом. Чтобы я отметил верный ответ.

[Shimpanze]

Вадим, Вот так правильно?

[Вадим]

Shimpanze,
Зачем Вам два бэм блока на одном HTML элементе? grid и posters-grid - второй бэм блок(posters-grid) зачем?
Зачем Вам бэм микс posters-grid__poster на poster-n?
Зачем Вам нумерация блоков poster-n?

[Shimpanze]

Вадим, Тогда я вообще не понимаю смысла в этом БЭМ. Разве я не должен, согласно БЭМ, не плодить классы в элементе, а сформировать один класс? В CSS-файле проще написать ".posters-grid__poster {}" чем ".posters-grid . poster {}".

[Вадим]

Shimpanze, БЭМ про выделение повторяющихся блоков в разметке для их переиспользования. Ну не только про это, но остановимся на этом.

Выделение такого блока как posters-grid возможно, но наделяет его смыслом. Что это сетка для постеров. Я не знаю что Вы делаете. возможно, у Вас на сайте полно блоков с сеткой для постеров и тогда это может иметь смысл. Однако, компонент сетки, как правило, не должен знать о том, что он содержит. Поэтому мы и выделяем просто блок grid, на который дальше уже можно накидывать модификаторы, уточняющие\переопределяющие его CSS реализацию.

Разве я не должен, согласно БЭМ, не плодить классы в элементе

Не уверен что мы с Вами сейчас будем про одно и то же, но БЭМ, к сожалению, про многословность. Это одна из притензий к БЭМу. Плодить лишнего, конечно же, не надо.

В CSS-файле проще написать

Так БЭМ не для того, чтобы Вам было проще писать в CSS файле. Иногда нужно писать сложнее, но один раз, а не проще, но повторяться или увеличивать связность кода. Ну и в целом, не понятно зачем Вам селектор вида .posters-grid . poster ну или замещающий его

posters-grid__poster

. Вы не ответили на вопрос выше. Даже если следовать БЭМу, то на одном проекте одно решение может быть подходящим, а на другом - не совсем. Контекст важен. Вы его не даёте.

posters-grid__poster

Вы не ответили на мои вопрос "зачем". Это допустимо, но нужно понимать когда и почему. Иначе будет дублирование кода. Сейчас у Вас, скажем, posters-grid, потом будут articles-grid а делают они одно и то же.

[Shimpanze]

Вадим, Есть интернет-магазин, у него есть область (главный слайдер?) разбитая на 4 равные части в которых, выводятся слайдеры или просто баннеры.

Нумерация banner-1, banner-2 [, banner-n] нужна для быстрого поиска этого элемента через JS.

Как любой нормальный программист, я сразу допускаю возможность, что будет ещё один слайдер баннеров в сайдбаре. В этом случае, мне придётся переписать много стилей и классов, так как идентификатору "grid" придётся добавлять сущность "-main". Так не проще ли добавить её сразу? - тогда в дальнейшем, ничего переписывать и дописывать никогда не придётся. А ведь на сайте есть ещё куча разных "grid" карточки товаров и проч.

[Вадим]

Shimpanze,

banner-1, banner-2 [, banner-n] нужна для быстрого поиска этого элемента через JS.

Ну тут сходу 2 альтернативных варианта:
1) Найти сразу все, а потом просто извлекать по индексу?
2) Делать нумерацию не в CSS а в data-атрибутах. например <div class="poster" data-index="1"> Статья по теме: https://learn.javascript.ru/dom-attributes-and-pro...
Ибо делать нумерацию в классах просто чтобы найти с помощью js - ок конечно, но практика сомнительная и явно не по бэму.

так как идентификатору "grid" придётся добавлять сущность

В этом и суть. У Вас максимально абстрактные правила для блока grid.
например:

.grid {
  display: grid;
}

И если Вы видите что сетки у Вас повторяются, то дальше выделить вариации и описать эти вариации через модификаторы. То есть в модификаторах будет определено сколько колонок, какие, какой отступ. Но это если в абсолют конечно куда-то уходить.
Суть вопроса к posters-grid в том, что Вы чётко говорите, что это сетка для постеров, при этом у Вас может быть точно такая же сетка не для постеров. Значит имя блока было определено не корректно. Слишком узко.
Суть вопроса к комбинации блоков .grid и .posters-grid на одном html элементе в том, что если posters-grid уточняет или переопределяет реализацию .grid, то скорее это не отдельный блок, а модификатор блока. И тогда по БЭМу, на мой взгляд, было бы корректнее как я предложил выше - <div class="grid grid_type_posters">

[Shimpanze]

Вадим, Да, истина в ваших словах, безусловно, присутствует. Только я всё же не могу понять, почему "grid_type_posters" написано через нижнее подчёркивание? Ведь это одна сущность? - ведь в CSS и HTML тире - стандарт.

[Вадим]

Shimpanze, потому что это модификатор для блока grid.

https://ru.bem.info/methodology/quick-start/#%D0%B...
Модификатор со значением для элемента:
block__elem_mod_mod-value
Модификатор со значением для блока:
block_mod_mod-value

Итого получаем:
Блок: grid
Имя модификатора: type
Значение модификатора: posters

То есть _ тут не для раздела слов в названии модификатора. А разделение разных частей модификатора.

[Shimpanze]

Вадим, Благодарю! Вы очень приятный человек.

[Вадим]

Shimpanze, всегда пожалуйста :-)

Answer 1

[Вадим]

недостаточно информации, но, предположим, что внешний див у вас сетка, внутренние - элементы, и тогда ответ такой:

1) Если предположение верно, то в сетке вообще о постерах ничего не должно быть. Должно быть что-то типа просто <div class="grid"> или с модификатором, говорящем о двух колонках: <div class="grid grid_col_2">. Ну на худой конец <div class="grid grid_type_posters"> если это какая то уникальная сетка не повторяющаяся в рамках проекта никогда и нигде.
2) Нижнее подчёркивание или тире - это на Ваш выбор, что использовать для разделения слов. Просто тогда нужно использовать разные разделители для сущностей, чтобы не пересекались с разделителем слов.
По классической версии нижнее подчёркивание используется для разделения модификатора.
3) Зачем Вам слово -item тоже не ясно.

итого:

<div class="grid">
    <div class="poster"></div>
    <div class="poster"></div>
</div>