Зазначимо: коли CSS одного компонента ламає стилі сусіднього, а правки в хедері тягнуть за собою переверстку всього layout — час впроваджувати систему іменування. Ми використовуємо BEM (Block, Element, Modifier) — методологію, яка ізолює стилі на рівні класів і робить код передбачуваним. Це не просто угода, а інженерна дисципліна, яка економить до 30% часу на підтримці коду. BEM вирішує головну проблему: CSS глобальний, і без дисципліни кожен новий блок — джерело хаосу.
Як BEM вирішує проблему глобального CSS?
У великих проєктах стилі з різних частин сайту перетинаються. Один розробник змінює .title, і ламаються заголовки в десяти компонентах. BEM перетворює кожен клас на унікальний ідентифікатор: .product-card__title не конфліктує з .header__title. Це дає масштабований CSS, де кожен блок самодостатній.
Що дає BEM для масштабування?
Без явної структури незрозуміло, де використовується клас. У BEM блок — самодостатній модуль: можна видалити або перейменувати .product-card і не зачепити решту коду. Компонентний підхід BEM дозволяє збирати інтерфейси з незалежних цеглинок, що спрощує підтримку та рефакторинг. На проєктах з 50+ компонентами це скорочує бюджет на підтримку на 30–40%.
BEM залишається стандартом для великих проєктів
Ми впроваджуємо BEM у проєкти з відвідуваністю до 1 млн унікальних на місяць — і це окупається на етапі підтримки. У проєкті з 200+ компонентами BEM скоротив час на пошук багів на 40%. Одна команда підтримує 50+ компонентів, і кожен новий розробник розуміє код без документації. BEM не потребує збирача: працює в будь-якому оточенні — від WordPress до React. Як зазначено в документації BEM, ізоляція класів — ключовий принцип, що забезпечує масштабованість.
Як BEM порівнюється з CSS Modules та Tailwind?
| Підхід | Сильні сторони | Слабкі сторони | Вплив на швидкість рефакторингу |
|---|---|---|---|
| BEM | Читабельні класи, явна структура, не потребує тулінгу | Багатослівність | У 2 рази швидше глобального CSS |
| CSS Modules | Автоматична ізоляція, немає конфліктів | Потребує збирача, складніше debug | На 30% довше через додатковий тулінг |
| Tailwind | Швидкість прототипування | Довгі className, складний HTML | Прототипування в 3 рази швидше, але підтримка на 50% довше |
BEM у 2 рази прискорює рефакторинг порівняно з глобальними стилями — це підтверджує досвід наших проєктів. На етапі підтримки ізоляція стилів BEM знижує кількість багів на 40%.
Як ми впроваджуємо BEM: розбір кейсу
Задача: зверстати картку товару для інтернет-магазину з тисячами товарів. Ми спроектували блок .product-card з елементами __media, __body, __pricing та модифікаторами --featured, --compact. Кожен елемент отримав свій файл у /blocks/product-card/. HTML:
<article class="product-card product-card--featured"> <div class="product-card__badge product-card__badge--new">Новинка</div> <figure class="product-card__media"> <img class="product-card__image" src="product.webp" alt="Товар по BEM" width="320" height="240"> </figure> <div class="product-card__body"> <h2 class="product-card__title">Назва товару</h2> <p class="product-card__description">Короткий опис...</p> <div class="product-card__pricing"> <span class="product-card__price product-card__price--current">2 990 ₴</span> <span class="product-card__price product-card__price--old">4 490 ₴</span> </div> </div> </article> CSS:
.product-card { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--color-border); border-radius: 8px; } .product-card--featured { border-color: var(--color-accent); } .product-card__media { aspect-ratio: 4 / 3; overflow: hidden; } .product-card__image { width: 100%; height: 100%; object-fit: cover; } .product-card__badge--new { background: #22c55e; color: white; } .product-card__pricing { display: flex; gap: 8px; } .product-card__price--current { font-weight: 700; } .product-card__price--old { text-decoration: line-through; color: gray; } Результат: верстка, яку легко масштабувати. Новий модифікатор додається одним класом, і жоден інший блок не страждає.
Часті помилки при іменуванні BEM
Детальніше про типові помилки
- Три рівні вкладеності у класі (`block__element__sub`) — помилка. Елемент завжди належить блоку, не іншому елементу. - Модифікатор без базового класу (`class="btn--primary"`) — так не працює. Завжди пишіть `class="btn btn--primary"`. - Контекстні стилі (`sidebar .product-card`) — порушують ізоляцію. Використовуйте модифікатор блоку. - Глобальні стани (`.is-active`) — замініть на `block__element--active`.Ці помилки трапляються у 80% проєктів, де BEM впроваджують без контролю. Дотримання правил скорочує час code review на 25%.
Процес роботи
- Аналітика — вивчаємо макети, виділяємо блоки.
- Проектування — створюємо BEM-дерево, визначаємо модифікатори.
- Верстка — пишемо HTML/CSS за BEM-угодами.
- Тестування — перевіряємо каскад, адаптив.
- Деплой — передаємо код з документацією та проводимо code review.
Що входить в роботу
- BEM-архітектура для всіх сторінок.
- Документація компонентів (стилі, модифікатори).
- Доступ до репозиторію з code-style.
- Навчання команди роботі з BEM.
- Підтримка протягом 1 місяця після здачі.
Терміни орієнтовно
| Обсяг | Час |
|---|---|
| Landing page (6–8 блоків) | 1.5–2.5 дня |
| Корпоративний сайт | 4–6 днів |
| UI-кіт (20–30 компонентів) | 5–8 днів |
Вартість розраховується індивідуально — залежить від складності та кількості блоків. Отримайте консультацію інженера з 5+ років досвіду в BEM. Замовте BEM-верстку під ключ — терміни від 1.5 днів. Наш досвід — 5+ років впровадження BEM у проєктах різного масштабу. Гарантуємо якість та передбачуваний результат.