В этой группе типовых интерфейсных шаблонов собраны примеры использования модификации блоков и их элементов.
Случай 1
Блок может измениться. Есть два или больше вариантов отображения этого блока.
Примерная разметка:
Copy <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> Обычная карточка и карточка с любым шевроном (Новинка , Акция , Скидка и другие).
Распределение по блокам, элементам и модификаторам:
Блоки, элементы и модификаторы для карточки товара Разметка:
Copy <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
Некоторые элементы внутри БЭМ-блока могут изменяться и их внешний вид отличается от базового состояния.
Примерная разметка:
Copy <div class="block">
<div class="block__element"></div>
<div class="block__element block__element--modifier"></div>
...
</div> Под эту схему подходят фотографии из каталога, которым поставили лайк.
Блоки, элементы и модификаторы:
Блоки, элементы и модификаторы для каталога с фотографиями Разметка интерфейсного элемента:
Copy <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
Бывают случаи, когда оба описанные выше шаблона (модификация блока и модификация элемента) используются на одном БЭМ-блоке одновременно.
Примерная разметка:
Copy <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> Допустим, это карточка товара, который закончился. Во-первых, в таких карточках кнопка купить/заказать становится не активной, во-вторых, сама карточка может отличаться по внешнему виду.
Блоки, элементы и модификаторы:
Блоки, элементы и модификаторы для карточки товара Разметка карточки:
Copy <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
Вложенный блок отображается не в своём, обычном, базовом состоянии, а немного видоизменённым.
Примерная разметка:
Copy <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> К примеру, в блоке контакты ссылки на страницы в социальных сетях различаются по цвету.
Блоки, элементы и модификаторы для интерфейсного элемента:
Блоки, элементы и модификаторы для ссылок на соцсети Разметка для элементов:
Copy <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
БЭМ-блок может менять свой внешний вид и при этом быть ещё и другим БЭМ-блоком с модификацией.
Примерная разметка:
Copy <div class="block"></div>
...
<div class="block block--modifier block-2 block-2--modifier">
<div class="block__element"></div>
...
</div> Под эту схему подходят всплывающие окна, для которых модификацией может служить вариант позиционирования (вверху экрана, внизу экрана).К примеру, нужно согласиться использовать Cookie на сайте, в то же время периодически появляется окно с советом дня.
Распределение по БЭМ-сущностям:
Разметка:
Copy <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> Last updated 11 months ago
