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

Случай 1

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

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

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

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

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

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

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

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

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

...
<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

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

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

<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>

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

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

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

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

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

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

<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

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

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

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

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

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

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

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

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

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

<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

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

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

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

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

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

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

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

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

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

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

Случай 5

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

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

<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>

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

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

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

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

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

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

<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>