БЭМ

Определение: БЭМ (Блок — Элемент — Модификатор) — это методология именования классов и организации разметки/стилей, которая помогает делать CSS предсказуемым и поддерживаемым. Идея простая: интерфейс собирается из независимых блоков, внутри которых есть элементы, а модификаторы задают варианты вида или состояния.

Зачем это нужно

• Снижать хаос в CSS: по имени класса сразу понятно, к чему относится стиль.
• Упрощать поддержку: легче править один блок, не ломая соседние части страницы.
• Повышать переиспользуемость: блок можно переносить между страницами и проектами.
• Делать стили масштабируемыми: когда сайт растёт, классы остаются управляемыми.
• Уменьшать конфликты специфичности: реже приходится “перебивать” стили сложными селекторами.
• Ускорять командную работу: единые правила именования понятны всем участникам.

Пример

Пример кода:

<button class="btn btn--primary"><span class="btn__text">Купить</span></button>

Скриншот

Подпись к скриншоту: вкладка DevTools “Elements”: пример HTML-элемента с классами по БЭМ (блок, элемент и модификатор)

Частые ошибки

• Смешивать БЭМ с “обычными” именами без правил, из-за чего методология перестаёт работать.
• Делать модификатор “вместо блока” (например, использовать --primary без базового класса блока).
• Слишком глубоко усложнять структуру: пытаться описать всё подряд цепочками элементов.
• Привязывать имена к внешнему виду (например, red-button), а не к смыслу/роли в интерфейсе.
• Использовать один и тот же элемент в разных блоках “как общий”, не выделяя отдельный блок.

Связанные термины

• CSS
• Каскад
• Специфичность
• Компонентный подход
• CSS-переменные
• Utility-классы
• Семантическая вёрстка

Наши услуги

• Создание корпоративных сайтов — выстраиваем понятную структуру классов и компонентов, чтобы сайт легко рос.
• Доработка сайтов — приведём стили к единому стандарту (в том числе по БЭМ), уберём конфликты и дубли.
• Техническая поддержка сайта — помогаем поддерживать и развивать фронтенд без деградации качества CSS.