How to get rid of long BEM class name?

Question

css

There is such a structure that I came up with such a ( screen ) block.

<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>

How can this (text-image-table-block-text-block__title) be shortened while sticking to BEM?

Answer 1

It is necessary to divide into blocks more granularly, then part of the specific semantics from the name of the element will go to the new block (which will shorten the nested elements).
The text part suggests itself to be an independent block, moreover, a bulleted list. For example, the structure might be:

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

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

That is, in the markup it will be something like:

<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>

In addition, I would recommend avoiding the abbreviation "description" in "desc", because the equally popular term "descending" fits perfectly there.

Answer 2

Give the block a relevant name. I see you name the block by the name of the image.
Name the blocks is from the answer to the question: What is it? You have a block or block. If there are individual styles for the block - add a new class