1. 17. 14. Миксы блоков и элементов
Эта группа содержит интерфейсные шаблоны, в которых один и тот же HTML-элемент одновременно будет и элементом вышестоящего блока и самостоятельным блоком. Как известно, в этой ситуации мы используем миксование.
Случай 1
Этот интерфейсный шаблон напоминает случай 2 из группы блоки и элементы. Отличием будет то, что вложенный блок будет ещё и элементом вышестоящего блока.
Примерная разметка:
<div class="block">
<div class="block__element-1"></div>
<div class="block__element-2 block-2">
<div class="block-2__element"></div>
</div>
...
</div>
К примеру, форма с отзывом о покупке. Поле для ввода — это элемент формы и самостоятельный блок. Аналогично, кнопка Отправить — это и элемент формы и отдельный самостоятельный блок со своей структурой.
Явно покажем блоки и элементы:
Напишем разметку:
Случай 2
На практике часто миксуются не только блок и элемент, но и два-три-четыре блока. Каждый блок отвечает за что-то одно, один — за сетку, другой — за выравнивание, третий — за отступы и так далее. В идеале выходит, что один блок отвечает за одну функцию.
Один HTML-элемент — это два блока, допустим, бизнес-сущность и сеточный блок.
Примерная разметка:
Например, раздел сайта с типовой двухколоночной сеткой, один блок отвечает за тему блока (services), второй за сетку (card).
Выделим блоки:
Разметим интерфейсный элемент:
Случай 3
Блок — это элемент вышестоящего БЭМ-блока и микс двух других блоков, а элементы вложенных блоков миксуются как элементы одновременно первого и второго вложенного блока.
Примерная разметка:
К примеру, боковая панель в личном кабинете пользователя. Во-первых, панель — это элемент страницы, во-вторых, это ещё и меню. А первый и последний пункт меню — это шапочный и подвальный элемент панели, как элементы с особым оформлением.
Добавим выделение для блоков и элементов:
Напишем разметку для третьего типового случая:
Last updated