@hujak_hujak

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

Может я не правильно понял документацию, но по моему вот это уже через чур, а может быть еще глубже
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
  • Вопрос задан
  • 548 просмотров
Решения вопроса 1
HamSter007
@HamSter007
HTML/CSS верстальщик
так чуточку лучше будет:
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
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
На самом деле, тот ужас, что вы привели, нарушает методологию. У элемента не должно быть элементов. Ваш мегаблок нужно разбить на более мелкие блоки со своими элементами. А то, что некоторые элементы вложены в другие элементы - часто совпадение, а не свидетельство их связанности друг с другом.
Почему в БЭМ не рекомендуется создавать элементы э... (парсер Тостера не может переварить якорь кириллицей, поэтому нужно мотать до блока "Почему в БЭМ не рекомендуется создавать элементы элементов").
Ответ написан
Комментировать
@ilyarsoftware
Есть смысл разбить на два блока:
<!-- микс блока 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>


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

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

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