W3C утвердил CSS Cascade Layers и новый цветовой модуль

Консорциум W3C выпустил финальные спецификации двух важных для веб-разработки технологий: каскадных слоёв (Cascade Layers) и расширенной работы с цветом (CSS Color Module Level 5). Браузеры уже несколько лет тестировали эти функции, и теперь они официально рекомендованы к использованию.

Что дают каскадные слои

Главное — директива @layer. Она переопределяет привычную логику: вместо того чтобы считать вес селекторов, браузер смотрит на порядок объявления слоёв. Раньше побеждал самый специфичный селектор — разработчики плодили вложенность или хватались за !important. Теперь достаточно объявить слои в начале файла, например:

@layer reset, base, components, utilities;

И стиль из слоя, который указан позже, автоматически перевешивает предыдущий, даже если его селектор проще. Конфликтов меньше, код проще поддерживать.

Новые цветовые функции

Вместе с этим модулем пришли три полезных инструмента:

• color-mix() — смешивает два цвета в любом пространстве;

• contrast-color() — автоматически подбирает контрастный оттенок к фону;

• light-dark() — упрощает переключение между светлой и тёмной темами.

По умолчанию используется пространство oklab — в нём результаты получаются более естественными, чем в старых добрых RGB и HSL.

Слои позволяют строить чистую архитектуру стилей без борьбы со специфичностью: библиотеки и дизайн-системы подключаются в отдельных слоях и переопределяются без !important. Цвета становятся динамическими — больше не нужно хранить отдельные наборы переменных для каждой темы.