Как организовать именование классов в разметке и какие подходы существуют

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

Понимаете ли вы, какую проблему решают соглашения об именах: конфликты селекторов, рост специфичности и страх удалить стиль. Интервьюер ждёт не список аббревиатур, а осмысленный выбор под проект. Следом часто спрашивают, нужен ли BEM, если в проекте CSS Modules или Tailwind.

Как отвечать

Разделите подходы на две группы: соглашения, где изоляцию обеспечивает дисциплина, и инструменты, где её обеспечивает сборка.

• BEM: блок, элемент и модификатор: card, card__title, card--featured. Селекторы одноклассовые, специфичность плоская, вложенность не нужна. Элемент принадлежит блоку, а не другому элементу, поэтому card__header__title это ошибка. Положение блока внутри другого задаётся миксом: class="card promo__item";
• OOCSS: разделение структуры и оформления, контейнера и содержимого. Классический пример: media object, картинка сбоку и текст, который переиспользуется в десятке мест;
• SMACSS: пять категорий стилей: base, layout, module, state и theme. Отсюда прижились классы состояний с префиксом is-, например is-open и is-disabled;
• utility-first: Tailwind и похожие, где класс это одно свойство. Имена придумывать не нужно, разметка длиннее, а повторы выносятся в компоненты;
• CSS Modules, scoped-стили во Vue, CSS-in-JS: сборщик сам делает имена уникальными, глобальные конфликты исчезают, и внутри модуля хватает коротких .title и .active.

Добавьте договорённости вокруг: классы для стилей не служат хуками для JS, тестам отдают data-testid, скриптам атрибуты или префикс js-. Порядком своих стилей и стилей библиотек удобно управлять каскадными слоями @layer.

Итог: в компонентном React-проекте логичны CSS Modules или Tailwind, в вёрстке без сборки и в дизайн-системе на чистом CSS самым надёжным остаётся BEM.

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

Строят BEM-цепочки по DOM вроде menu__list__item__link. Стоит перенести элемент, и имя приходится менять.

Называют семантические классы по внешнему виду: red-text, left-column. Дизайн меняется, и имя начинает врать.

Смешивают подходы без правил, и через год рядом живут BEM, утилиты и глобальные .active, которые перебивают друг друга.