> For the complete documentation index, see [llms.txt](https://breadcrumbs.gitbook.io/base-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://breadcrumbs.gitbook.io/base-1/1.-17.-razmetka-po-bem/1.-17.-13.-bloki-i-elementy.md). # 1. 17. 13. Блоки и элементы #### Случай 1 Первый типовой интерфейсный шаблон — блок, в котором дочерние HTML-элементы, это элементы (БЭМ-сущность элемент). Примерная разметка: ```
...
```
Схема для случая 1

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

Под описание типового *случая 1* подходит, к примеру, значение выбранного фильтра в каталоге (название категории/значение и кнопка удалить), карточка товара.
Пример для случая 1

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

Сразу, возможно, блоки и элементы не считываются, покажем их явно.
Блоки и элементы для выбранного фильтра и карточки товара

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

Ну и чтобы окончательно убедиться в том, что это наш первый типовой интерфейсный шаблон, напишем разметку и классы. ``` ... ... ... ``` #### Случай 2 Этот типовой интерфейсный шаблон напоминает предыдущий случай, но наряду с БЭМ-элементами, в блоке могут быть и вложенные блоки со своими элементами. Примерная разметка: ```
...
```
Схема для случая 2

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

Например, это может быть встроенный фоторедактор, в котором отдельная кнопка в панели инструментов — это самостоятельный блок.
Пример для случая 2

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

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

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

Подкрепим всё разметкой: ```
...
``` #### Случай 3 Плоское БЭМ-дерево на практике, рубим ветви. Примерная разметка: ```
...
```
Схема для случая 3

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

В эту группу можно отнести навигацию по сайту (список + элементы списка + ссылки).
Пример для случая 3

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

Выделим блоки и элементы:
Блоки и элементы для навигации по сайту

Блоки и элементы для навигации по сайту

Напишем разметку: ``` ``` #### Случай 4 Блок, в который вложены другие блоки. Примерная разметка: ```
...
```
Схема для случая 4

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

Под это описание подходит сокращённая форма подписки, в которой есть только поле для ввода и кнопка *Подписаться*. Она, обычно, размещается в подвале сайта.
Пример для случая 4

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

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

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

Разметка будет выглядеть так: ```
``` #### Случай 5 В блок вложены другие блоки, которые сами состоят из элементов. Примерная разметка: ```
...
..
...
```
Схема для случая 5

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

Например, сложный слайдер, в котором на отдельном слайде может быть не только изображение, но и текст.
Пример для случая 5

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

Покажем блоки и элементы, которые мы увидели:
Блоки и элементы для сложного слайдера

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

Напишем разметку для интерфейсного элемента: ```

Новинка

Бургер от шефа

Сочная котлета, сыр, томаты, лук, листья салата и шеф-соус

Добавить в корзину
...
```