БЭМ (Блок, Элемент, Модификатор) — методология именования классов в CSS для создания масштабируемого и поддерживаемого кода. Ее цель — сделать компоненты независимыми, переиспользуемыми и легко изменяемыми.
Основные принципы:
- Блок: Независимый компонент, имеющий уникальное имя. Может содержать элементы и другие блоки.
html
- Элемент: Часть блока, которая не имеет самостоятельного значения вне контекста блока. Имя элемента отделяется от имени блока двумя подчеркиваниями (
__).
html
- Модификатор: Добавляет блоку или элементу состояние или изменяет его внешний вид/поведение. Имя модификатора отделяется от имени блока или элемента двумя дефисами (
--).
html
Преимущества:
- Читаемость: Классы легко понять, видно структуру компонента.
- Переиспользование: Компоненты независимы и могут использоваться в разных частях проекта.
- Поддерживаемость: Изменения в одном компоненте минимально влияют на другие.
- Масштабируемость: Хорошо подходит для больших команд и проектов.
Пример структуры:
css