@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) возможно сократить, придерживаясь БЭМа?

qpKTdnC.png
  • Вопрос задан
  • 203 просмотра
Решения вопроса 1
@Free_ze
Пишу комментарии в комментарии, а не в ответы
Необходимо гранулярнее делить на блоки, тогда часть специфичной семантики из названия элемента уедет в новый блок (что укоротит вложенные элементы).

Текстовая часть напрашивается быть независимым блоком, причем, маркированным списком. Например, структура может быть такой:
.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".
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
kaleniybrat
@kaleniybrat
Frontend разработчик и верстальщик
Дай релевантное название блоку. Я вижу ты называешь блок по названию изображения.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы