Елемент

Складова частина блоку, яка не має окремого значення і не може використовуватися окремо від нього. Наприклад, елемент меню, заголовок або текст у статті, зображення галереї тощо.

Ім'я класу елемента:

• Обов'язково формується за схемою блок__елемент. Ім'я блоку задає простір імен, який гарантує залежність його елементів.
• Повинно відповідати на питання «Що це?», наприклад блок__item, блок__title, блок__link, блок__image тощо.
• Не повинно відповідати на питання «Як виглядає?», наприклад блок__big-link, блок__blue-text, блок__round-button тощо.

<!-- ✅ Блок logo з елементами image і label -->
<a href="" class="logo">
  <img class="logo__image" src="..." alt="Логотип компанії Технокряк" />
  <span class="logo__label">Компанія Технокряк</span>
</a>

<!-- ❌ Елемент за межами блоку не має окремого значення -->
<img class="logo__image" src="..." alt="Логотип компанії Технокряк" />

<!-- ✅ Блок product з елементами name, price і link -->
<article class="product">
  <h1 class="product__name">Холодильник</h1>
  <p class="product__price">Ціна: 30000</p>
  <a class="product__link" href="">Переглянути всі характеристики</a>
</article>

<!-- ❌ Елемент за межами блоком не має окремого значення -->
<h1 class="product__name">Холодильник</h1>

Як відрізнити блок від елементу?

Задайте собі питання: «Ця сутність може знадобитися мені окремо і самостійно? Чи вона потрібна тільки всередині її батька?». Якщо потрібна окремо - це блок, якщо має значення тільки як частина - це елемент.

Вкладеність

Елементи можна вкладати один в одного, водночас допустима будь-яка вкладеність, оскільки BEM-класи не прив'язані до HTML-ієрархії. HTML-структура елементів блоку може бути довільною.

Навігація - це блок, а елемент списку і посилання - це елементи блоку навігації.

<ul class="nav">
  <li class="nav__item">
    <a class="nav__link" href="">Про нас</a>
  </li>
  <li class="nav__item">
    <a class="nav__link" href="">Контакти</a>
  </li>
  <li class="nav__item">
    <a class="nav__link" href="">Галерея</a>
  </li>
</ul>

Структура BEM-класів такого компонента буде плоскою.

.nav
.nav__item
.nav__link

Додамо BEM-класи до розмітки картки продукту з декількома рівнями вкладеності.

<article class="product">
  <div class="product__overlay">
    <img class="product__image" src="" />
  </div>

  <div class="product__content">
    <h2 class="product__name">Холодильник</h2>
    <p class="product__description">Шикарний холодильник</p>
    <a class="product__link" href="">Переглянути всі характеристики</a>

    <div class="product__meta">
      <p class="product__price">Ціна: 30000</p>
      <p class="product__quantity">Залишилось: 8 штук</p>
    </div>
  </div>
</article>

Структура BEM-класів блоку та його елементів завжди буде плоскою, незалежно від глибини вкладеності елементів один в одного. Це дозволяє змінювати структуру HTML-розмітки блоку без внесення змін у стилі.

.product
.product__overlay
.product__image
.product__content
.product__name
.product__description
.product__link
.product__meta
.product__price
.product__quantity

Увага

Елемент - завжди частина блоку, а не іншого елемента. Це означає, що в імені класу елемента не можна прописувати ієрархію на зразок блок__елемент1__елемент2.

Необов'язковість

Елемент - це необов'язкова частина блоку. Не у всіх блоків повинні бути елементи і не усі елементи можуть бути присутніми у різних екземплярах блоку.

<!-- Блок button з іконкою і текстом -->
<button class="button" type="button">
  <svg class="button__icon">...</svg>
  <span class="button__label">В кошик</span>
</button>

<!-- Блок button тільки з текстом -->
<button class="button" type="button">
  <span class="button__label">В кошик</span>
</button>

<!-- Блок button тільки з іконкою -->
<button class="button" type="button">
  <svg class="button__icon">...</svg>
</button>