Микс
Прием, позволяющий использовать разные БЭМ-сущности на одном 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
оставить универсальным. Таким образом, блок можно использовать в любом другом окружении, потому что он не специфицирует никакие отступы. Это позволяет нам говорить о его независимости.