Можно ли вкладывать блок в блок в BEM?

Можно ли вкладывать блок в блок в BEM?

Да, но с очень важными ограничениями и спецификой. В классической методологии BEM (Block-Element-Modifier) прямое вложение блока внутрь другого блока как часть его структуры не рекомендуется и считается нарушением основных принципов. Однако блоки могут находиться внутри других блоков в разметке как независимые, автономные сущности. Это ключевое отличие: блок не является элементом другого блока, он является самостоятельным блоком внутри другого блока.

Основные принципы BEM и отношение к вложению

В основе BEM лежит идея независимых, повторно используемых компонентов (Block). Блок — это самостоятельная сущность:

• Он может использоваться в любом месте проекта.
• Его стилизация не зависит от контекста (внешнего блока).
• Он содержит свои собственные элементы (Element), которые принадлежат только ему и обозначаются через __.

Если мы попытаемся объявить один блок элементом другого (например, .header__menu где menu — это отдельный блок), это нарушит принципы:

1. Потеря независимости: Блок menu станет зависимым от блока header, его нельзя будет переместить или использовать отдельно без изменения CSS-класса.
2. Нарушение логики именования: Элементы (__) принадлежат только своему блоку. Блоки должны иметь свои собственные, уникальные имена.

Правильное «вложение» блоков в BEM на практике

На практике блоки часто располагаются в DOM внутри других блоков. Правильный подход заключается в том, чтобы эти блоки оставались абсолютно независимыми в именовании и стилизации.

Рассмотрим пример: блок header содержит внутри себя блок menu.

Неправильный подход (нарушение BEM):

<!-- Блок menu объявлен как элемент блока header -->
<div class="header">
  <div class="header__menu"> <!-- menu потерял независимость -->
    <button class="header__menu-item">Item 1</button>
  </div>
</div>

Правильный подход (независимые блоки):

<!-- Блок header и блок menu независимы, просто находятся вместе в разметке -->
<div class="header">
  <div class="menu">
    <button class="menu__item">Item 1</button>
  </div>
</div>

Стили для .menu и .menu__item пишутся совершенно независимо от .header. Блок menu можно теперь использовать в footer, sidebar или anywhere без изменения класса.

Случаи, требующие особого внимания

1. Верстка для специфического контекста: Если блок menu внутри header должен выглядеть особенно (например, иметь другой цвет), следует использовать модификатор (Modifier) для menu, а не стили, зависимые от родителя .header.

   <div class="header">
     <div class="menu menu--theme-dark">
       <button class="menu__item">Item 1</button>
     </div>
   </div>
   

   .menu--theme-dark {
     background-color: #333;
   }
   

2. Микс (Mix): Техника BEM, позволяющая применять стили и поведение нескольких блоков/элементов к одному HTML-элементу. Это мощный инструмент для композиции без нарушения независимости.

   <!-- Элемент item одновременно является элементом блока menu и использует стили блока button -->
   <div class="menu">
     <button class="menu__item button">Item 1</button>
   </div>
   

    Здесь класс `button` (блок) «смешивается» с классом `menu__item` (элемент). Блок `button` остается независимым и повторно используемым.

Выводы и рекомендации

• Неправильно: Вкладывать блок как элемент другого блока через синтаксис Block__Element.
• Правильно: Размещать независимые блоки внутри других блоков в DOM-структуре.
• Для адаптации блока к конкретному контексту используйте модификаторы (.block--modifier).
• Для создания сложных компонентов из более простых используйте микси (совместное применение классов на одном элементе).
• Если возникает ощущение, что один блок является частью другого — возможно, стоит пересмотреть архитектуру. Может быть, это действительно должен быть элемент, или же это два отдельных блока, которые просто находятся рядом.

Таким образом, вложение блоков в BEM — это не о структурной зависимости, а о композиции независимых компонентов. Это позволяет строить гибкие, масштабируемые и легко поддерживаемые интерфейсы, что является главной целью методологии BEM.