БЭМ: элементы

Блок редко состоит из одного тега: у карточки есть картинка, заголовок и цена. Такие части в БЭМ называются элементами. Элемент имеет смысл только внутри своего блока — заголовок карточки без карточки ничего не значит.

Имя элемента

Имя элемента состоит из имени блока, двух подчёркиваний __ и названия части:

<style>
  .card { padding: 12px; border: 1px solid silver; border-radius: 8px; max-width: 220px; }
  .card__title { margin: 0 0 4px; font-size: 18px; }
  .card__price { color: seagreen; font-weight: bold; }
</style>
 
<div class="card">
  <h3 class="card__title">Рюкзак</h3>
  <span class="card__price">40 €</span>
</div>

По одному взгляду на .card__price понятно: это цена, и живёт она в карточке. Если название из нескольких слов, их соединяют дефисом: .card__old-price.

Элемент принадлежит блоку

Элемент может лежать в разметке на любой глубине — прямо в блоке или внутри обёрток. Важно только то, что он внутри своего блока:

<style>
  .profile { display: flex; gap: 10px; align-items: center; }
  .profile__avatar { width: 40px; height: 40px; border-radius: 50%; background: plum; }
  .profile__name { font-weight: bold; }
  .profile__role { color: gray; font-size: 14px; }
</style>
 
<div class="profile">
  <div class="profile__avatar"></div>
  <div>
    <div class="profile__name">Анна</div>
    <div class="profile__role">дизайнер</div>
  </div>
</div>

Имя и роль лежат во вложенном <div>, но остаются элементами блока profile. Обёртке без своих стилей класс не нужен.

Почему не повторяют вложенность

В имени никогда не бывает двух элементов подряд: не .menu__list__item__link, а просто .menu__link. Имя описывает принадлежность блоку, а не путь по дереву тегов:

Плоские имена короче, а главное — разметку внутри блока можно перестроить: добавить обёртку или убрать её, и ни один класс не придётся переименовывать.

Элемент или новый блок

Если часть можно использовать отдельно от родителя, это не элемент, а самостоятельный блок. Кнопка «Купить» в карточке — отдельный блок button: она встречается и в корзине, и в форме. А вот цена карточки вне карточки не нужна — это элемент card__price. Если внутри элемента появляется своя сложная структура, её тоже стоит вынести в новый блок.

Частая ошибка

Использовать элемент вне его блока, «потому что стили подходят»:

<style>
  .card__title { margin: 0 0 4px; font-size: 18px; color: rebeccapurple; }
</style>
 
<section>
  <h2 class="card__title">Отзывы покупателей</h2>
</section>

Сейчас заголовок выглядит нормально, но стоит поменять карточку — и раздел отзывов изменится вместе с ней. Если стили нужны в другом месте, сделайте общий блок, например .heading.