Микс

Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле.

Миксы позволяют:

  • совмещать поведение и стили нескольких сущностей без дублирования кода;
  • создавать семантически новые компоненты интерфейса на основе имеющихся.

Пример

<!-- Блок 'header' --> 
<div class="header"> 
  <!-- К блоку 'search-form' примиксован элемент 'search-form' блока 'header'--> 
  <div class="search-form header__search-form"></div> 
</div>

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

results matching ""

    No results matching ""