# 1. 17. 15. Модификаторы блоков и элементов
В этой группе типовых интерфейсных шаблонов собраны примеры использования модификации блоков и их элементов.
#### Случай 1
Блок может измениться. Есть два или больше вариантов отображения этого блока.
Примерная разметка:
```
...
...
...
```
Схема для случая 1
Обычная карточка и карточка с любым шевроном (*Новинка*, *Акция*, *Скидка* и другие).
Пример для случая 1
Распределение по блокам, элементам и модификаторам:
Блоки, элементы и модификаторы для карточки товара
```
#### Случай 2
Некоторые элементы внутри БЭМ-блока могут изменяться и их внешний вид отличается от базового состояния.
Примерная разметка:
```
...
```
Схема для случая 2
Под эту схему подходят фотографии из каталога, которым поставили лайк.
Пример для случая 2
Блоки, элементы и модификаторы:
Блоки, элементы и модификаторы для каталога с фотографиями
Разметка интерфейсного элемента:
```
819211282
```
#### Случай 3
Бывают случаи, когда оба описанные выше шаблона (модификация блока и модификация элемента) используются на одном БЭМ-блоке одновременно.
Примерная разметка:
```
...
...
...
```
Схема для случая 3
Допустим, это карточка товара, который закончился. Во-первых, в таких карточках кнопка купить/заказать становится не активной, во-вторых, сама карточка может отличаться по внешнему виду.
Пример для случая 3
Блоки, элементы и модификаторы:
Блоки, элементы и модификаторы для карточки товара
Разметка карточки:
```
Журнальный стол из массива дуба
Универсальная подставка из липы
```
#### Случай 4
Вложенный блок отображается не в своём, обычном, базовом состоянии, а немного видоизменённым.
Примерная разметка:
```
...
```
Схема для случая 4
К примеру, в блоке контакты ссылки на страницы в социальных сетях различаются по цвету.
Пример для случая 4
Блоки, элементы и модификаторы для интерфейсного элемента:
Блоки, элементы и модификаторы для ссылок на соцсети
```
#### Случай 5
БЭМ-блок может менять свой внешний вид и при этом быть ещё и другим БЭМ-блоком с модификацией.
Примерная разметка:
```
...
...
```
Схема для случая 5
Под эту схему подходят всплывающие окна, для которых модификацией может служить вариант позиционирования (вверху экрана, внизу экрана).К примеру, нужно согласиться использовать *Cookie* на сайте, в то же время периодически появляется окно с советом дня.
Совет дня: для поиска нужных изображений воспользуйтесь строкой поиска.
...
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://breadcrumbs.gitbook.io/base-1/1.-17.-razmetka-po-bem/1.-17.-15.-modifikatory-blokov-i-elementov.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
8
192
