Как правильно давать имена блоков по БЭМ c глубокой вложенностью?

Question

[hujak_hujak]

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

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

[HamSter]

так чуточку лучше будет:

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

Блоки могут быть вложены в любые другие блоки.

бэм документация, лично мне не особо помогла

Посмотрите примеры реализации бэм, тогда понятнее станет, например yyoksel

Answer 2

[Алексей Уколов]

На самом деле, тот ужас, что вы привели, нарушает методологию. У элемента не должно быть элементов. Ваш мегаблок нужно разбить на более мелкие блоки со своими элементами. А то, что некоторые элементы вложены в другие элементы - часто совпадение, а не свидетельство их связанности друг с другом.
Почему в БЭМ не рекомендуется создавать элементы э... (парсер Тостера не может переварить якорь кириллицей, поэтому нужно мотать до блока "Почему в БЭМ не рекомендуется создавать элементы элементов").

Answer 3

[i]

Есть смысл разбить на два блока:

<!-- микс блока 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>

Если надо одним блоком:

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

или

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

Конечное решение зависит от проекта и вашего подхода к его реализации. Методология гибкая и не диктует реализацию строго.