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

В этой группе типовых интерфейсных шаблонов собраны примеры использования модификации блоков и их элементов.

Случай 1

Блок может измениться. Есть два или больше вариантов отображения этого блока.

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

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

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

Обычная карточка и карточка с любым шевроном (Новинка, Акция, Скидка и другие).

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

Распределение по блокам, элементам и модификаторам:

Блоки, элементы и модификаторы для карточки товара

Разметка:

<section class="product-preview">
  <h3 class="product-preview__title">
    <a class="product-preview__link" href="#">Клубничный торт</a>
  </h3>
  <img class="product-preview__img" src="/adaptive/29/book/html/bem/common-cases-modifiers/img/photo-1.jpg" width="224" height="160" alt="">
  <p class="product-preview__description">Бисквит, клубника, крем, желатин, сахар</p>
  <p class="product-preview__price">120 ₽</p>
  <button class="product-preview__button button" type="button">В корзину</button>
</section>
<section class="product-preview product-preview--new">
  <h3 class="product-preview__title">
    <a class="product-preview__link" href="#">Брауни</a>
  </h3>
  <img class="product-preview__img" src="/adaptive/29/book/html/bem/common-cases-modifiers/img/photo-2.jpg" width="224" height="160" alt="">
  <p class="product-preview__description">Какао, фундук, карамель, шоколадная стружка</p>
  <p class="product-preview__price">135 ₽</p>
  <button class="product-preview__button button" type="button">В корзину</button>
</section>

Случай 2

Некоторые элементы внутри БЭМ-блока могут изменяться и их внешний вид отличается от базового состояния.

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

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

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

Под эту схему подходят фотографии из каталога, которым поставили лайк.

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

Блоки, элементы и модификаторы:

Блоки, элементы и модификаторы для каталога с фотографиями

Разметка интерфейсного элемента:

<section class="card">
  <img class="card__photo" src="img/photo-1.jpg" width="300" height="300" alt="">
  <button class="card__favorite" type="button">46</button>
  <a class="card__comment" href="#">8</a>
  <a class="card__views" href="#">192</a>
</section>
<section class="card">
  <img class="card__photo" src="/adaptive/29/book/html/bem/common-cases-modifiers/img/photo-2.jpg" width="300" height="300" alt="">
  <button class="card__favorite card__favorite--checked" type="button">135</button>
  <a class="card__comment" href="#">112</a>
  <a class="card__views" href="#">82</a>
</section>

Случай 3

Бывают случаи, когда оба описанные выше шаблона (модификация блока и модификация элемента) используются на одном БЭМ-блоке одновременно.

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

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

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

Допустим, это карточка товара, который закончился. Во-первых, в таких карточках кнопка купить/заказать становится не активной, во-вторых, сама карточка может отличаться по внешнему виду.

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

Блоки, элементы и модификаторы:

Блоки, элементы и модификаторы для карточки товара

Разметка карточки:

<section class="card">
  <img class="card__photo" src="/adaptive/29/book/html/bem/common-cases-modifiers/img/photo-1.jpg" width="300" height="300" alt="">
  <p class="card__description">Журнальный стол из массива дуба</p>
  <button class="card__button" type="button">Заказать</button>
</section>
<section class="card card--out-of-stock">
  <img class="card__photo" src="/adaptive/29/book/html/bem/common-cases-modifiers/img/photo-2.jpg" width="300" height="300" alt="">
  <p class="card__description">Универсальная подставка из липы</p>
  <button class="card__button card__button--disabled" type="button">Нет в наличии</button>
</section>

Случай 4

Вложенный блок отображается не в своём, обычном, базовом состоянии, а немного видоизменённым.

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

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

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

К примеру, в блоке контакты ссылки на страницы в социальных сетях различаются по цвету.

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

Блоки, элементы и модификаторы для интерфейсного элемента:

Блоки, элементы и модификаторы для ссылок на соцсети

Разметка для элементов:

<div class="social">
  <p class="social__caption">Мы в соцсетях:</p>
  <ul class="social__list">
    <li class="social__item">
      <a class="social__link social-link social-link--theme-youtube" href="#">
        <svg class="social-link__icon"></svg>
        <span class="social-link__title">YouTube</span>
      </a>
    </li>
    <li class="social__item">
      <a class="social__link social-link social-link--theme-tiktok" href="#">
        <svg class="social-link__icon"></svg>
        <span class="social-link__title">TikTok</span>
      </a>
    </li>
    ...
  </ul>
</div>

Случай 5

БЭМ-блок может менять свой внешний вид и при этом быть ещё и другим БЭМ-блоком с модификацией.

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

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

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

Под эту схему подходят всплывающие окна, для которых модификацией может служить вариант позиционирования (вверху экрана, внизу экрана).К примеру, нужно согласиться использовать Cookie на сайте, в то же время периодически появляется окно с советом дня.

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

Распределение по БЭМ-сущностям:

БЭМ-сущности для всплывающих окон на сайте

Разметка:

<div class="popup"></div>
...
<div class="popup popup--top notification notification--theme-light">
  <p class="notification__message">Наш сайт использует cookies, <a href="#">подробнее по ссылке</a>.</p>
  ...
</div>
...
<div class="popup popup--right notification notification--theme-dark">
  <p class="notification__message"><b>Совет дня:</b> для поиска нужных изображений воспользуйтесь строкой поиска.</p>
  ...
</div>