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>

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

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

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

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

<form class="feedback-form" action="#" method="POST">
  <p class="feedback-form__title">Отзыв о покупке</p>
  <label class="feedback-form__field">
    <span class="feedback-form__field-label">Имя</span>
    <input class="feedback-form__field-control input" type="text" name="feedback-form-recipient-name" placeholder="Ваше имя">
  </label>
  <label class="feedback-form__field">
    <span class="feedback-form__field-label">E-mail</span>
    <input class="feedback-form__field-control input" type="email" name="feedback-form-recipient-email" placeholder="Ваш e-mail">
  </label>
  ...
  <button class="feedback-form__button button" type="submit">Отправить</button>
</form>

Случай 2

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

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

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

<div class="block block-2">
  <div class="block__element"></div>
...
</div>

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

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

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

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

<section class="services card">
  <h3 class="services__title">Поможем вам найти подходящего специалиста</h3>
  <img class="services__img" src="/adaptive/29/book/html/bem/common-cases-mixing/img/photo-1.jpg" width="300" height="300" alt="">
  <p class="services__text">Ответьте на несколько вопросов и система подберёт психологов и терапевтов, которые помогут вам справиться с проблемой.</p>
  <button class="services__button" type="button">Подобрать психолога</button>
</section>

Случай 3

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

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

<div class="block">
  <div class="block__element block-2 block-3">
    <div class="block-2__element block-3__element">
  </div>
</div>

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

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

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

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

<body class="page">
  <div class="page__aside panel menu">
    <div class="panel__header menu__item">Мой аккаунт</div>
    <div class="menu__item">Личная информация</div>
    ...
    <div class="panel__footer menu__item">О сервисе</div>
  </div>
</body>

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

Last updated 1 year ago