Що таке методологія BEM (блок елемент модифікатор)
BEM (Block — Element — Modifier) — це методологія іменування класів CSS, створена для організації, повторного використання та масштабованості HTML та CSS коду.
Вона допомагає уникнути конфліктів стилів, робить код зрозумілим, передбачуваним та легким для підтримки під час роботи в команді.
Розподіл
| Компонент | Опис |
|---|---|
| Block | Незалежна сутність, семантичний компонент (наприклад, header, button) |
| Element | Частина блоку, не має значення поза ним (button__icon) |
| Modifier | Стан або варіація блоку/елемента (button--active, button__icon--small) |
Конвенція іменування
block__element--modifier
Приклади:
css
.button { } /* Block */
.button__icon { } /* Element */
.button--primary { } /* Modifier */
.button__icon--large { } /* Element with Modifier */Переваги:
BEM робить код самодокументованим, запобігає конфліктам стилів і спрощує роботу в командах.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.