# 1. 17. 13. Блоки и элементы

#### Случай 1 <a href="#sluchai-1" id="sluchai-1"></a>

Первый типовой интерфейсный шаблон — блок, в котором дочерние HTML-элементы, это элементы (БЭМ-сущность элемент).

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

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_method_6.svg" alt="Схема для случая 1"><figcaption><p>Схема для случая 1</p></figcaption></figure>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_add_4_2@1x.png" alt="Пример для случая 1"><figcaption><p>Пример для случая 1</p></figcaption></figure>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_add_4_1@1x.png" alt="Блоки и элементы для выбранного фильтра и карточки товара"><figcaption><p>Блоки и элементы для выбранного фильтра и карточки товара</p></figcaption></figure>

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

```
...
<ul class="filters">
  <li class="filter">
    <span class="filter__value">для города</span>
    <button class="filter__delete-button" type="button"></button>
  </li>
  <li class="filter">
    <span class="filter__value">количество скоростей: 1</span>
    <button class="filter__delete-button" type="button"></button>
  </li>
</ul>
...
<ul class="catalog">
  <li class="catalog__item">
    <section class="card">
      <h3 class="card__title">
        <a class="card__link" href="#">Велосипед Peugeot</a>
      </h3>
      <img class="card__img" src="/adaptive/29/book/html/bem/common-cases-blocks-and-elements/img/photo-1.jpg" width="300" height="300" alt="">
      <p class="card__description">Шоссейный велосипед для поездок по городу</p>
      <p class="card__price">от 78 000 ₽</p>
      <p class="card__delivery-info">Доставка 17 октября</p>
    </section>
  </li>
  <li class="catalog__item">
    <section class="card">
      <h3 class="card__title">
        <a class="card__link" href="#">Cannondale Track</a>
      </h3>
      <img class="card__img" src="img/photo-2.jpg" width="300" height="300" alt="">
      <p class="card__description">Гоночный болид среди велосипедов с 1 скоростью</p>
      <p class="card__price">от 135 500 ₽</p>
      <p class="card__delivery-info">Доставка 1 декабря</p>
    </section>
  </li>
  ...
</ul>
...
```

#### Случай 2 <a href="#sluchai-2" id="sluchai-2"></a>

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

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

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_method_10.svg" alt="Схема для случая 2"><figcaption><p>Схема для случая 2</p></figcaption></figure>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_add_5_2@1x.png" alt="Пример для случая 2"><figcaption><p>Пример для случая 2</p></figcaption></figure>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_add_5_1@1x.png" alt="Блоки и элементы для встроенного фоторедактора"><figcaption><p>Блоки и элементы для встроенного фоторедактора</p></figcaption></figure>

Подкрепим всё разметкой:

```
<div class="photo-editor">
  <img class="photo-editor__source" src="/adaptive/29/book/html/bem/common-cases-blocks-and-elements/img/photo.jpg" width="300" height="300" alt="">
  <button class="image-button" type="button">
    <svg class="image-button__icon"></svg>
    <span class="image-button__description">кадрирование</span>
  </button>
  <button class="image-button" type="button">
    <svg class="image-button__icon"></svg>
    <span class="image-button__description">вращение</span>
  </button>
...
</div>
```

#### Случай 3 <a href="#sluchai-3" id="sluchai-3"></a>

Плоское БЭМ-дерево на практике, рубим ветви.

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

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_method_11.svg" alt="Схема для случая 3"><figcaption><p>Схема для случая 3</p></figcaption></figure>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_add_6_2@1x.png" alt="Пример для случая 3"><figcaption><p>Пример для случая 3</p></figcaption></figure>

Выделим блоки и элементы:

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_add_6_1@1x.png" alt="Блоки и элементы для навигации по сайту"><figcaption><p>Блоки и элементы для навигации по сайту</p></figcaption></figure>

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

```
<ul class="site-navigation">
  <li class="site-navigation__item">
    <a class="site-navigation__link" href="#">Главная</a>
  </li>
  <li class="site-navigation__item">
    <a class="site-navigation__link" href="#">Услуги</a>
  </li>
  ...
</ul>
```

#### Случай 4 <a href="#sluchai-4" id="sluchai-4"></a>

Блок, в который вложены другие блоки.

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

```
<div class="block">
  <div class="block-2"></div>
  <div class="block-3"></div>
  ...
</div>
```

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_method_12.svg" alt="Схема для случая 4"><figcaption><p>Схема для случая 4</p></figcaption></figure>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_add_7_2.svg" alt="Пример для случая 4"><figcaption><p>Пример для случая 4</p></figcaption></figure>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_add_7_1.svg" alt="Блоки и элементы для формы подписки"><figcaption><p>Блоки и элементы для формы подписки</p></figcaption></figure>

Разметка будет выглядеть так:

```
<form class="subscribe" action="#" method="POST">
  <input class="input" type="email" name="search" placeholder="Ваш e-mail">
  <button class="button" type="submit">Подписаться</button>
</form>
```

#### Случай 5 <a href="#sluchai-5" id="sluchai-5"></a>

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

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

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_method_13.svg" alt="Схема для случая 5"><figcaption><p>Схема для случая 5</p></figcaption></figure>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_add_8_2@1x.png" alt="Пример для случая 5"><figcaption><p>Пример для случая 5</p></figcaption></figure>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/adaptive/29/book/html/bem/common-cases-blocks-and-elements/bem_add_8_1@1x.png" alt="Блоки и элементы для сложного слайдера"><figcaption><p>Блоки и элементы для сложного слайдера</p></figcaption></figure>

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

```
<div class="slider">
  <div class="slide">
    <img class="slide__img" src="/adaptive/29/book/html/bem/common-cases-blocks-and-elements/img/photo-1.jpg" width="820" height="300" alt="">
    <p class="slide__label">Новинка</p>
    <p class="slide__headline">Бургер от шефа</p>
    <p class="slide__description">Сочная котлета, сыр, томаты, лук, листья салата и шеф-соус</p>
    <a class="slide__button" href="#">Добавить в корзину</a>
  </div>
  ...
</div>
```
