Как правильно распределить где «Блок», а где «Элемент» в БЭМ?

Question

[sgmobb]

Не программист, не верстальщик – дизайнер. Но для наглядности свои дизайны собираю в webflow. Пытаюсь сделать так, что бы потом верстальщик мог это использовать без боли в глазах и мозгах.

Да и самому системность не помешает, так что пытаюсь понять принцип работы БЭМ. Читаю, но не могу понять что делать когда часть является Блоком на одном уровне и одновременно Элементом на другом.



Вот тут у нас блок .e-commerce с четырьмя элементами .e-commerce_item.

Но каждый такой item содержит 7 внутренних элементов, а значит сам является блоком.

Какой класс в итоге должен быть у карточки товара .e-commerce__item? Или просто .item?

Если первое, то как именовать внутренние элементы карточки?

Если второе, как избежать путаницы между например .item который в блоке .features? Или ещё какой-то item?

Или сразу называть блок так, что бы это было уникально, то есть грубо говоря .e-commerce-item?

Или может должен быть элемент .e-commerce__item внутри которого блок div .e-commerce-item со своими элементами уже внутри него?

Answer 1

[Олег]

Это 4 блока product или product-card (имя по вкусу). В данном блоке еще куча других самостоятельных блоков: кнопка, заголовок, параграф, ссылка, картинка.

Читаю, но не могу понять что делать когда часть является Блоком на одном уровне и одновременно Элементом на другом.

Это нормально, это называется микс.

Comments

[sgmobb]

Но при этом они элементы блока e-commerce?

[Олег]

sgmobb: Возможно, мне сложно сказать наугад, они могут быть элементами любого блока. В данном случае можно обойтись без блока e-commerce. Он несет какую-то смысловую нагрузку? Для позиционирования обычно есть общая модульная сетка.

[i]

Олег: Микс: Способ использования разных БЭМ-сущностей на одном DOM-узле, в данном случае это блок внутри блока, а лучше и более гибко заворачивать блоки в элементы блока.

[Олег]

Илья Рогов: Не очень понял ваш коммент) Я знаю и про миксы и про обертки, лучшего решения здесь нет и нужно смотреть по ситуации, порой микс лучше, порой обертка.

[sgmobb]

В любом случае – спасибо. В целом я понял смысл, стало яснее.