Как браузер выбирает стиль при конфликте
Вопрос
Объясни, как браузер решает, какое значение свойства применить, если несколько правил противоречат друг другу.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Каскад идёт по шагам: важность и происхождение, inline, слои, специфичность, порядок в коде
`!important` сильнее обычных правил, включая inline
Специфичность тройкой (id, классы, теги), сравнение слева направо
При равной специфичности побеждает правило ниже по коду
Наследование слабее любого правила, нацеленного на сам элемент
Более поздний `@layer` сильнее раннего, стили вне слоёв сильнее всех слоёв
Что могут спросить следом
- Чему равна специфичность
:where(.a) .b? - Почему не стоит чинить конфликты через
!important? - Что победит: стиль вне слоёв или id внутри слоя?
Разбор
Браузер собирает все объявления для свойства и сравнивает их по шагам каскада. Сначала происхождение и важность: !important поднимает объявление над всеми обычными, в том числе над inline. Затем обычный inline-стиль из атрибута style сильнее правил из таблиц. Потом каскадные слои: более поздний слой бьёт ранний, а стили вне слоёв сильнее всех слоёв. Если и тут равенство, сравнивается специфичность: тройка из количества id, классов с атрибутами и псевдоклассами, и тегов с псевдоэлементами, слева направо. Если и она равна, побеждает правило, которое ниже в коде. Отдельно про наследование: оно работает, только если на сам элемент нет ни одного правила, даже * его перебьёт. В проекте стараюсь держать специфичность низкой и ровной: классы вместо id, :where() для базовых стилей, слои для сброса и утилит, а !important только в утилитах.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.