How to correctly give BEM block names with deep nesting?

Question

BEM

Maybe I misunderstood the documentation, but in my opinion this is already too much, and maybe even deeper

div class="header"
    div class="header__block-wrapper"
        div class="header__block-wrapper__left-block"
            div class="header__block-wrapper__left-block__aside"
                div class="header__block-wrapper__left-block__aside--pink" /div
            /div
        /div
        div class="header__block-wrapper__right-block"
            div class="header__block-wrapper__right-block__aside"
                div class="header__block-wrapper__left-block__aside--blue" /div
            /div
        /div

    /div
/div

Answer 1

so it would be a little better:

div class="header"
div class="header__block-wrapper"
div class="header__block-wrapper__left-block"
div class="aside aside_pink"
/div
/div
div class="header__block-wrapper__right-block"
div class="aside aside_blue"
/div
/div

/div
/div

bam documentation , personally didn’t help me much
Look at examples of bam implementation, then it will become clearer, for example y yoksel

Answer 2

In fact, the horror that you brought violates the methodology. An element must not have elements. Your mega block needs to be broken into smaller blocks with their own elements. And the fact that some elements are nested in other elements is often a coincidence, and not evidence of their connection with each other.
Why is it not recommended to create elements in BEM... (Toaster's parser cannot digest the anchor in Cyrillic, so you need to scroll to the block "Why it is not recommended to create elements of elements in BEM").

Answer 3

It makes sense to break it into two blocks:

<!-- микс блока wrapper, но можно и не миксовать, если нужно -->
<div class="header wrapper">
  <!-- элемент блока wrapper -->
  <div class="wrapper__left">
    <!-- aside элемент блока header c модификатором pink -->
    <div class="header__aside header__aside_pink"/>
  </div>
  <!-- элемент блока wrapper -->
  <div class="wrapper__right">
    <!-- aside элемент блока header c модификатором blue -->
    <div class="header__aside header__aside_blue"/>
  </div>
</div>

If you need one block:

<div class="header">
  <!-- wrappe элемент блока header -->
  <div class="header__wrapper">
    <!-- wrapperLeft элемент блока header -->
    <div class="header__wrapperLeft">
      <!-- aside элемент блока header c модификатором pink -->
      <div class="header__aside header__aside_pink"/>
    </div>
    <!-- wrapperRight элемент блока header -->
    <div class="header__wrapperRight">
      <!-- aside элемент блока header c модификатором blue -->
      <div class="header__aside header__aside_blue"/> 
    </div>
  </div>
</div>

or

<div class="header">
  <!-- wrapper элемент блока header c модификатором left -->
  <div class="header__wrapper header__wrapper_left">
    <!-- aside элемент блока header c модификатором pink -->
    <div class="header__aside header__aside_pink"/>
  </div>
  <!-- wrapper элемент блока header c модификатором right -->
  <div class="header__wrapper header__wrapper_right">
    <!-- aside элемент блока header c модификатором blue -->
    <div class="header__aside header__aside_blue"/>
  </div>
</div>

The final decision depends on the project and your approach to its implementation. The methodology is flexible and does not strictly dictate the implementation.