Источник каскада

К элементу применяются стили не только из файлов сайта. У браузера есть собственная таблица стилей: благодаря ей заголовки крупные и жирные, у списков есть маркеры, а у body — отступ в 8 пикселей. Пользователь может добавить свои стили через расширение или настройки доступности. И лишь третий слой — то, что написал разработчик. Спецификация называет эти слои источниками: user-agent, user и author.

Порядок приоритета

Сравнение источников — первый шаг каскада, раньше специфичности и порядка правил. При этом !important переворачивает порядок источников:

1. обычные стили браузера — самый низкий приоритет;
2. обычные стили пользователя;
3. обычные стили автора;
4. CSS-анимации;
5. авторские !important;
6. пользовательские !important;
7. !important браузера;
8. CSS-переходы — самый высокий.

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

Пример: откат к стилям браузера

/* сброс в теме убрал маркеры у всех списков */
ul { list-style: none; padding: 0; }

/* в тексте статьи вернуть то, что задаёт браузер */
.article ul { list-style: revert; padding: revert; }

Ключевое слово revert откатывает свойство к значению из предыдущего источника — для авторских стилей это стили пользователя или браузера. Разница с initial видна на отступе: revert вернёт списку браузерный отступ слева, а initial дал бы ноль — начальное значение padding по спецификации.

Чем отличается от слоя

Внутри авторского источника в современных браузерах можно заводить собственные уровни приоритета правилом @layer. Слой каскада похож на источник, но управляется разработчиком: стили фреймворка можно положить в нижний слой, а свои — в верхний. Источники же заданы браузером и не настраиваются. В инструментах разработчика правила из таблицы браузера подписаны как user agent stylesheet — по этой подписи легко понять, откуда взялся неожиданный отступ.