search

1. 17. 14. Миксы блоков и элементов

Эта группа содержит интерфейсные шаблоны, в которых один и тот же HTML-элемент одновременно будет и элементом вышестоящего блока и самостоятельным блоком. Как известно, в этой ситуации мы используем миксование.

hashtag
Случай 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>
Схема для случая 1
Схема для случая 1

К примеру, форма с отзывом о покупке. Поле для ввода — это элемент формы и самостоятельный блок. Аналогично, кнопка Отправить — это и элемент формы и отдельный самостоятельный блок со своей структурой.

Пример для случая 1
Пример для случая 1

Явно покажем блоки и элементы:

Блоки и элементы для формы с отзывом о покупке
Блоки и элементы для формы с отзывом о покупке

Напишем разметку:

hashtag
Случай 2

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

Один HTML-элемент — это два блока, допустим, бизнес-сущность и сеточный блок.

Примерная разметка:

Схема для случая 2
Схема для случая 2

Например, раздел сайта с типовой двухколоночной сеткой, один блок отвечает за тему блока (services), второй за сетку (card).

Пример для случая 2
Пример для случая 2

Выделим блоки:

Бизнесовый и сеточный блоки для раздела сайта
Бизнесовый и сеточный блоки для раздела сайта

Разметим интерфейсный элемент:

hashtag
Случай 3

Блок — это элемент вышестоящего БЭМ-блока и микс двух других блоков, а элементы вложенных блоков миксуются как элементы одновременно первого и второго вложенного блока.

Примерная разметка:

Схема для случая 3
Схема для случая 3

К примеру, боковая панель в личном кабинете пользователя. Во-первых, панель — это элемент страницы, во-вторых, это ещё и меню. А первый и последний пункт меню — это шапочный и подвальный элемент панели, как элементы с особым оформлением.

Пример для случая 3
Пример для случая 3

Добавим выделение для блоков и элементов:

Блоки и элементы для боковой панели в личном кабинете пользователя
Блоки и элементы для боковой панели в личном кабинете пользователя

Напишем разметку для третьего типового случая:

Previous1. 17. 13. Блоки и элементыNext1. 17. 15. Модификаторы блоков и элементов

Last updated