Какой цвет текста применяется, если элемент имеет два класса с разными цветами в CSS и почему

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

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

Как отвечать

Если у элемента class="red blue", а в CSS есть .red { color: red } и .blue { color: blue }, у обоих селекторов одинаковая специфичность (0,1,0). Тогда побеждает правило, объявленное в таблице стилей позже. Порядок имён в атрибуте на результат не влияет.

Дальше покажите, что порядок это последний критерий, а до него браузер проверяет другие:

• важность: объявление с !important побеждает обычное независимо от специфичности и порядка;
• каскадные слои: для обычных объявлений стиль вне @layer сильнее любого слоя, а среди слоёв выигрывает объявленный позже. Для !important порядок слоёв переворачивается;
• инлайн-стиль: атрибут style перебивает любые селекторы из таблиц без !important;
• специфичность: считается по разрядам (id, затем классы, атрибуты и псевдоклассы, затем теги). Селектор .red.blue или div.blue сильнее одиночного класса;
• порядок появления: при прочих равных выигрывает последнее правило, с учётом порядка подключения файлов.

Хорошо добавить про :where(), который обнуляет специфичность, и про :is(), который берёт специфичность самого сильного аргумента. Проверить, какое правило победило, проще всего во вкладке Styles в DevTools: проигравшие объявления там зачёркнуты.

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

Отвечают, что победит класс, записанный в атрибуте последним. Браузеру порядок в class безразличен, важен только порядок правил в CSS.

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

Забывают, что порядок правил в сборке не всегда совпадает с порядком в исходниках. При разбиении CSS на чанки или динамическом импорте стилей файлы могут подключиться в другом порядке, и цвет в проде окажется не тем, что в dev. Надёжнее не полагаться на порядок, а развести стили через модификатор, специфичность или @layer.