Пошук уроків, статей та іншого контенту
Вивчимо блоки, елементи й модифікатори БЕМ та застосуємо їх для іменування класів.
БЕМ — це методологія іменування класів у HTML та CSS. Назва походить від трьох понять:
Блок — самостійна частина інтерфейсу.
Елемент — частина блока, яка не має сенсу окремо від нього.
Модифікатор — варіант або змінений стан блока чи елемента.
БЕМ допомагає створювати зрозумілі класи та уникати конфліктів між стилями.
Основний формат імен:
block
block__element
block--modifier
block__element--modifierНаприклад:
card
card__title
card__button
card--featured
card__button--disabledБлок — це незалежний компонент сторінки, який можна повторно використати в іншому місці.
Приклади блоків:
header
menu
card
form
button
modal
Блок може містити інші блоки. Наприклад, у блоці header може розміщуватися блок menu.
<header class="header">
<nav class="menu">
<!-- вміст меню -->
</nav>
</header>У цьому прикладі header і menu — окремі незалежні блоки.
Назва блока має описувати його призначення, а не зовнішній вигляд:
<!-- Добре -->
<div class="notification"></div>
<!-- Гірше -->
<div class="blue-box"></div>Якщо колір зміниться, назва blue-box стане неправильною. Назва notification залишається актуальною незалежно від стилю.
Елемент — це частина блока. Він не має самостійного значення поза своїм блоком.
Для запису елемента використовують два символи підкреслення:
block__elementПриклад блока картки:
<article class="card">
<h2 class="card__title">Вивчення HTML</h2>
<p class="card__description">
Основи створення вебсторінок.
</p>
<button class="card__button">Почати</button>
</article>У цьому прикладі:
card — блок;
card__title — заголовок картки;
card__description — опис картки;
card__button — кнопка картки.
Елемент завжди належить конкретному блоку. Клас card__title означає «заголовок блока card».
У БЕМ назва елемента описує його безпосередній зв’язок із блоком, а не всю структуру HTML.
Правильно:
<article class="card">
<div class="card__content">
<h2 class="card__title">Заголовок</h2>
</div>
</article>Неправильно:
<article class="card">
<div class="card__content">
<h2 class="card__content__title">Заголовок</h2>
</div>
</article>card__content__title створює зайву залежність від структури. Якщо title перемістити в інший контейнер, його клас доведеться перейменовувати.
Модифікатор описує варіант, розмір або стан блока чи елемента.
Для блока використовують два дефіси:
block--modifierДля елемента:
block__element--modifierПриклади:
<article class="card card--featured">
<h2 class="card__title">Рекомендований курс</h2>
</article>
<button class="button button--large">
Зареєструватися
</button>Тут:
card--featured — особливий варіант блока card;
button--large — великий варіант блока button.
Модифікатор зазвичай додають разом з основним класом:
<button class="button button--primary">Зберегти</button>Клас button містить базові стилі, а button--primary змінює або доповнює їх.
Не варто використовувати модифікатор без основного блока:
<!-- Неправильно -->
<button class="button--primary">Зберегти</button>Нижче наведено повний приклад картки з блоком, елементами та модифікатором. Код можна зберегти у файл index.html і відкрити в браузері.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад БЕМ</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 32px;
font-family: Arial, sans-serif;
background-color: #f1f5f9;
}
.card {
width: 320px;
padding: 24px;
border: 1px solid #cbd5e1;
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.card--featured {
border-color: #2563eb;
}
.card__title {
margin: 0 0 12px;
color: #1e293b;
font-size: 24px;
}
.card__description {
margin: 0 0 20px;
color: #475569;
line-height: 1.5;
}
.card__button {
padding: 10px 16px;
border: 0;
border-radius: 6px;
color: #ffffff;
background-color: #64748b;
cursor: pointer;
}
.card__button--primary {
background-color: #2563eb;
}
</style>
</head>
<body>
<article class="card card--featured">
<h2 class="card__title">HTML та CSS</h2>
<p class="card__description">
Вивчіть основи створення та стилізації вебсторінок.
</p>
<button class="card__button card__button--primary">
Переглянути курс
</button>
</article>
</body>
</html>Розглянемо класи в прикладі:
card — основний блок;
card--featured — модифікатор блока для рекомендованої картки;
card__title — елемент із заголовком;
card__description — елемент з описом;
card__button — базовий стиль кнопки;
card__button--primary — модифікатор кнопки.
Один HTML-елемент може мати кілька класів. Це дає змогу поєднати базові стилі з модифікатором:
<button class="card__button card__button--primary">
Переглянути курс
</button>У CSS селектори зазвичай відповідають класам БЕМ без складних вкладених селекторів:
.card {
padding: 24px;
}
.card__title {
margin-bottom: 12px;
}
.card--featured {
border-color: blue;
}Такий підхід має кілька переваг:
клас одразу пояснює призначення елемента;
стилі менш залежні від HTML-вкладеності;
блоки легше переносити та повторно використовувати;
зменшується ризик конфліктів між класами.
Блок можна використати кілька разів на одній сторінці:
<article class="card">
<h2 class="card__title">Перший курс</h2>
<button class="card__button">Детальніше</button>
</article>
<article class="card card--featured">
<h2 class="card__title">Рекомендований курс</h2>
<button class="card__button card__button--primary">
Детальніше
</button>
</article>Обидві картки використовують однакову структуру та базові стилі. Друга картка додатково має модифікатор card--featured.
<div class="red-large-block"></div>Така назва прив’язана до кольору та розміру. Краще назвати блок за його призначенням:
<div class="alert alert--error"></div><div class="menu">
<ul class="menu__list">
<li class="menu__list__item">Головна</li>
</ul>
</div>Краще:
<div class="menu">
<ul class="menu__list">
<li class="menu__item">Головна</li>
</ul>
</div>.card h2 {
color: navy;
}Такий стиль залежить від того, що заголовок має бути саме h2. Надійніше використати клас:
.card__title {
color: navy;
}<button class="button--large">Надіслати</button>Модифікатор має доповнювати блок:
<button class="button button--large">Надіслати</button>Не потрібно створювати окремий клас для кожної CSS-властивості:
<div class="card padding-24 rounded-border gray-text"></div>Краще описати компонент одним блоком і його модифікаторами:
<div class="card card--muted"></div>Перед написанням класу поставте собі три запитання:
Це самостійний компонент?
Так — назвіть його блоком: card.
Це частина конкретного блока?
Так — назвіть її елементом: card__title.
Це особливий варіант або стан?
Так — додайте модифікатор: card--featured або card__button--primary.
Наприклад, для повідомлення про помилку:
<div class="alert alert--error">
<p class="alert__text">Не вдалося виконати операцію.</p>
</div>alert — блок повідомлення;
alert__text — його елемент;
alert--error — модифікатор стану помилки.
БЕМ — це спосіб організовувати та іменувати CSS-класи.
Блок — незалежний компонент, наприклад card.
Елемент — частина блока, наприклад card__title.
Модифікатор — варіант або стан, наприклад card--featured.
Для елементів використовують __, а для модифікаторів — --.
Модифікатор додають разом з основним класом.
Назви класів мають описувати призначення компонента, а не лише його колір чи розмір.
Не потрібно відображати всю вкладеність HTML у назві елемента.