Какие рекомендации по написанию CSS-стилей: использовать id, классы, теги или дата-атрибуты?

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

Понимаете ли вы специфичность и каскад, и есть ли у вас система, при которой стили не приходится перебивать !important. Следом обычно спрашивают, как посчитать специфичность селектора или как вы организуете CSS в большом проекте.

Как отвечать

Начните со специфичности, её считают тройкой (id, классы, теги):

• id: вес (1,0,0). Один #header перевешивает любое количество классов. Для стилей id почти не используют, он нужен для якорей, label for и связок aria-labelledby;
• класс: вес (0,1,0), столько же у псевдоклассов и селекторов атрибутов. Основной инструмент: переиспользуется, одинаков по весу, легко переопределяется;
• тег: вес (0,0,1). Уместен в сбросе и базовых стилях, а также для типографики внутри контейнера с контентом из CMS или Markdown, где классы не проставить;
• data-атрибут: по весу равен классу. Хорош для состояний и вариантов: [data-state="open"], [data-size="sm"]. Для состояний доступности лучше сразу стилизовать по [aria-expanded="true"], тогда вид и семантика не разойдутся.

Дальше про систему. Держите специфичность плоской: один класс на правило, как в БЭМ (.card__title--active), или изоляция через CSS Modules, где имена классов уникальны автоматически. Для управления порядком есть каскадные слои @layer: порядок слоёв важнее специфичности, поэтому сброс, компоненты и утилиты разводятся без гонки весов. :where() обнуляет специфичность, это удобно для базовых стилей библиотек, :is() берёт вес самого тяжёлого аргумента.

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

Стилизуют по id, а потом перебивают его !important. Дальше специфичность растёт гонкой, и каждое изменение ломает что-то рядом.

Пишут глубокие цепочки вроде .page .sidebar ul li a. Стиль привязан к разметке, ломается от лишней обёртки и переопределяется только ещё более длинным селектором.

Вешают стили на data-testid или на классы, за которые цепляется JavaScript. Тогда рефакторинг вёрстки ломает тесты и скрипты. Хуки для тестов, для JS и для оформления лучше держать раздельно.