Как правильно по БЭМу?

Question

[Лев Александров]

Есть главная страница, на ней перечислены айтемы (допустим, продукты). Вот:


У каждого продукта отдельная страница с детялами:


1) Айтем продукта и детали продукта могут сильно отличаться. Они должны быть одним БЭМ блоком? Например, product. Или разными, например, product-item и product-detail

2) Как лучше именовать product-item или item-product?

Comments

[Ankhena]

2) Как лучше именовать product-item или item-product?

Какие у вас аргументы против понятного product?

Но если все таки не product, то вам помогут правила английского языка.

1) Айтем продукта и детали продукта могут сильно отличаться. Они должны быть одним БЭМ блоком? Например, product. Или разными, например, product-item и product-detail

Логично, что это один блок. И модификаторы к нему. Если он при этом еще является дочерним элементом списка продуктов, то микс из элемента и блока.

[Лев Александров]

Ankhena,

Какие у вас аргументы против понятного product?

Аргумент был, когда я хотел их разделить на item и detail: product-item, product-detail, т. к. считал их за разные сущности и думал, так будет легче верстать, т. к. меньше модификаторов придется создавать. Теперь понял, что лучше просто product.

Спасибо за помощь, Ankhena!

[Сергей delphinpro]

Ankhena, Почему один блок? Страница товара и карточка в списке могут отличаться процентов на 90-100. И в процессе жизни сайта эти отличия могут увеличиваться.
Проще сделать отдельными блоками, чем городить переопределения модификаторами.
Кроме того, внутри карточки вполне можно делать отдельные блоки (те, которые почти повторяются).

[Сергей delphinpro]

Лев Александров,

Теперь понял, что лучше просто product.

Не считаю, что это лучше. У вас получится огромный класс, в котором будет сложнее ориентироваться. Если проводить аналогию с программированием, то там такое называют god object, и это считается анти-паттерном.
Я бы разделял ответственность, карточка - это одна сущность, детальное описание - другая.

[Ankhena]

Сергей delphinpro, с БЭМ хорошо, "куда повернул, то и вышло" и вариантов решений много.

[Сергей delphinpro]

Ankhena, это да. Но я про этот конкретный случай. Он достаточно распространен - карточка/страница товара.

[Ankhena]

Сергей delphinpro, ещё обычно к нему прилагаются вариации товар в корзине, товар в подтверждении заказа и т.д.
Но это не аргумент ни в ту ни в другую сторону :)

[Лев Александров]

Ankhena,

Но это не аргумент ни в ту ни в другую сторону :)

Тогда как решать? Каждый делает, как хочет?

ещё обычно к нему прилагаются вариации товар в корзине, товар в подтверждении заказа и т.д.

Да, у меня так и есть
Карточка

Детали

В корзине

[Лев Александров]

Сергей delphinpro,

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

да я тоже так считаю, но почему-то всегда вижу советы делать модификаторы и стараюсь прислушиваться к более опытным людям.

[Ankhena]

Лев Александров,

Тогда как решать? Каждый делает, как хочет?

Именно так. Причём, возможно, по-разному в разных проектах.

[Сергей delphinpro]

Лев Александров, Три совершенно разных блока. Не создавайте себе проблем сейчас и другим, кто будет поддерживать в будущем. product-item/product-card, cart-item, product/product-details

Answer 1

[Realetive]

Лучше одним, да. На главной: .product.product_view_preview, на странице продукта — .product.product_view_detail. Это удобнее, т. к. в обоих вариантах по-любому повторяются общие элементы: заголовок, изображение, описание.
А для описание отличий используются модификаторы (можно на уровне модификатора блока через каскад).

.page.page_route_index
  .page__header.header
  .page__content
    .page__heading
    .page__section
    .list.list_of_products
      .list__item.product.product_view_preview
        .product__title
        .product__description
        .product__image
        .product__price

.page.page_route_product
  .page__header.header
  .page__content.product.product_view_detail
    .page__heading.product__title
      .product__section
        .product__image
        .product__description
      .product__content
      .product__price

Comments

[Лев Александров]

Красиво.
Думаю, вы ошиблись во втором блоке кода. У продукта модификатор detail хотели поставить.

Кстати, как вы решаете, когда заголовок называть heading, а когда title?
Читал в интернете разницу между этими словами, но она мне показалась очень "размытой".

[Realetive]

Лев Александров, да, точно: .page__content.product.product_view_detail. Спасибо.

Я всегда использую heading для заголовков, чтобы не было путаницы с тегом <title>. Но уверен, что это не идеальное решение и с непривычки выглядит «странненько».

[Лев Александров]

Realetive, понятно)
Спасибо большое за помощь!