Как избавиться от длинного имени класса БЭМ?

Question

[eugenedrvnk]

Есть такая структура, которая у меня вышла к такому (скрин) блоку.

<div class="text-image-table">
    <div class="text-image-table-block">
      <div class="text-image-table-block__text-blocks">
        <div class="text-image-table-block-text-block">
          <div class="text-image-table-block-text-block__title text-with-dot"> User Journey </div>
          <div class="text-image-table-block-text-block__desc"> Description long text </div>
        </div>
      </div>

      <img class="text-image-table-block__img" :src="block.imgURL">
    </div>
  </div>

Как это (text-image-table-block-text-block__title) возможно сократить, придерживаясь БЭМа?

Answer 1

[Толстый Лорри]

Необходимо гранулярнее делить на блоки, тогда часть специфичной семантики из названия элемента уедет в новый блок (что укоротит вложенные элементы).

Текстовая часть напрашивается быть независимым блоком, причем, маркированным списком. Например, структура может быть такой:

.advantages-card (&--reversed)
    &__description // текстовая часть
    &__picture

.bullet-list
    &__item
    &__item-heading
    &__item-description

То есть в разметке это будет что-то вроде:

<div class="advantages-card">
  <ul class="bullet-list advantages-card__description">
    <li class="bullet-list__item">
      <header class="bullet-list__item-heading">User Journey</header>
      <p class="bullet-list__item-description">Description long text</p>
    </il>
  </ul>
  <img class="advantages-card__picture" :src="block.imgURL">
</div>

Кроме того, я бы рекомендовал избегать сокращения "description" в "desc", потому что туда идеально укладывается не менее популярный термин "descending".

Comments

[eugenedrvnk]

А имеет ли право на жизнь подобный вариант? Т.е. не бить на блоки составляющие, а делать дерево с одноуровневой вложенностью? (ihorzenich.github.io/talks/bem-frontendweekend/?full#61)

<div class="text-image-table">
    <div class="text-image-table__row">
      <div class="text-image-table__text-blocks">
        <div class="text-image-table-text-block">
          <div class="text-image-table__title"> text </div>
          <div class="text-image-table__description"> text </div>
        </div>
      </div>

      <img class="text-image-table__img" :src="block.imgURL">
    </div>
  </div>

[Толстый Лорри]

eugenedrvnk, с точки зрения БЭМ - да, может, никто не запрещает хоть всю страницу одним блоком сверстать (= Хотя ориентироваться в разметке гораздо проще, когда явно обозначена иерархическая структура блоков, а не просто большой "плоский" список элементов.

Answer 2

[Дмитрий Николаев]

Дай релевантное название блоку. Я вижу ты называешь блок по названию изображения.

Называть блоки стоит из ответа на вопрос: Что это ? У тебя это блок или block. Если есть индивидуальные стили для блока - добавляй новый класс