Почему в CSS приоритет класса выше, чем у тега, и почему в поле class можно указывать несколько классов

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

Знаете ли вы правило специфичности как алгоритм, а не как присказку «класс сильнее тега», и понимаете ли, что атрибут class это список, а не одно значение. Проверка базовая, но по ответу видно, писал ли человек стили руками.

Как отвечать

Специфичность селектора это тройка чисел: идентификаторы, затем классы вместе с атрибутами и псевдоклассами, затем теги и псевдоэлементы. Разряды сравниваются слева направо, а не суммируются: селектор с одним классом сильнее селектора из десяти тегов.

Логика здесь содержательная. Тег совпадает со всеми элементами такого вида на странице, класс автор проставляет руками именно там, где хочет выделить конкретный элемент. Побеждает более узкое намерение, каскад ставит его выше.

p { color: gray; }
.note { color: black; }

Абзац с классом note будет чёрным независимо от порядка правил. Порядок в файле решает только при равной специфичности.

Несколько классов в атрибуте нужны потому, что элемент одновременно участвует в разных наборах правил: базовый .button, модификатор .button_primary, состояние .is-loading. Вид собирается композицией, а не отдельным селектором на каждое сочетание, и на этом построены и БЭМ, и утилитарные наборы классов.

Хорошо добавить современные детали: :where() обнуляет вклад своего содержимого, :is() берёт максимум изнутри, каскадные слои @layer разбираются раньше специфичности, а атрибут style перебивает любой селектор.

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

Думают, что порядок классов в атрибуте что-то значит, и меняют их местами. Браузер видит неупорядоченный набор, а выигрывает правило, которое ниже в таблице стилей.

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

Третье: решают конфликт через !important. Это отдельная ступень каскада, она выигрывает у всего, и дальше начинается гонка: следующий конфликт лечится вторым !important, а специфичность перестаёт работать как инструмент.