Что такое методология БЭМ

Что проверяют

Знаете ли вы правила БЭМ, а не только пример button__text, и понимаете ли, какую проблему он решает. Следом часто спрашивают, нужен ли БЭМ, если в проекте CSS Modules или Tailwind.

Как отвечать

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

• блок: самостоятельный компонент, card, search-form. Не зависит от окружения и не задаёт себе внешние отступы и позиционирование;
• элемент: часть блока, вне его бессмысленная, card__title. Пишется через два подчёркивания и относится к блоку, а не к другому элементу;
• модификатор: состояние или вариант, card_theme_dark или card--dark. Ставится только вместе с базовым классом: class="card card_theme_dark";
• микс: несколько сущностей на одном узле, class="header__search search-form". Так родитель задаёт положение вложенного блока, не залезая в его стили.

Схем именования две: классическая яндексовская с одиночным подчёркиванием для модификатора (block_mod_value) и популярная альтернатива с двумя дефисами (block--mod). Главное выбрать одну и держаться её во всём проекте.

Правила для CSS: стили только по классам, без id и селекторов по тегам, без каскада вида .card .title. Тогда специфичность у правил одинаковая, а результат не зависит от вложенности.

Про современный стек отвечайте без догм. CSS Modules и CSS-in-JS дают изоляцию автоматически, и полный БЭМ там избыточен, хотя логика элементов и модификаторов часто остаётся в именах классов. В препроцессорах удобно писать &__title и &--active, но такие имена хуже ищутся по коду.

Где спотыкаются

Строят цепочки card__header__title, повторяя DOM. Элемент принадлежит блоку напрямую, иначе любая правка вёрстки требует переименования.

Ставят модификатор без базового класса: class="card--dark". Базовые стили блока при этом теряются.

Пишут БЭМ-имена, но стилизуют вложенностью .card .card__title или вешают отступы на сам блок. Смысл методологии пропадает: специфичность растёт, а блок нельзя переставить в другое место без правок.