Рабочая группа CSS опубликовала первый публичный черновик модуля каскада и наследования 5 уровня. Главная его новинка по сравнению с текущим, 4 уровнем — так называемые «слои» стилей, добавочный критерий каскада, позволяющий задавать приоритет целой группе стилей и гарантирующий, что стили одного «слоя» всегда перекроют стили другого независимо от их специфичности и порядка в коде. Например, стили темы оформления всегда будут перекрывать стили сайта по умолчанию, и для этого не понадобится наращивать специфичность или следить за порядком подключения CSS-файлов. Идея и проработка этого механизма — заслуга Мириам Сюзанн, которая специально для этого присоединилась к команде редакторов в качестве приглашенного эксперта W3C.

«Слои» стилей создаются директивой @layer. Есть два варианта синтаксиса — в виде блока, внутри которого записываются обычные правила с селекторами (как @media), и в виде ссылки на отдельный CSS-файл (как @import). Стили из блоков (и файлов) с одинаковым именем слоя попадают в один и тот же слой. Блоки @layer могут быть вложенными. Приоритет слоёв задается порядком их объявления, причем можно объявить его «заранее», в самом начале CSS-кода, и лишь потом «распределять» стили по этим слоям:

/* объявляем заранее 3 слоя в порядке возрастания приоритета */
@layer default, theme, components;

/* стили из theme.css попадут в слой 'theme' */
@layer theme url(theme.css);

/* Стили ниже попадут в слой 'default' (базовые).
   Они всегда будут перекрываться стилями из 'theme',
   несмотря на то, что ниже в коде,
   и даже при более высокой специфичности */
@layer default url(headings.css);

@layer default {
  audio[controls] {
    display: block;
  }
}

Подробнее о новинке можно прочитать в блоге Софии Валитовой.

Теперь дело за браузерами, чтобы это реализовать. Как видите, и в 2021 году CSS остается каскадными таблицами стилей, но «стихия» каскада становится всё более управляемой. Так что не упустите возможность подчинить себе всю мощь этой стихии (а не «бороться» с ней). Тем более, что W3C вступает в 2021 год не только с новым рабочим процессом (теперь спецификации будут реже «прыгать» туда-обратно между статусами черновика и кандидата в рекомендации, а на устаревших спецификациях будет специальная пометка, и ориентироваться в них станет проще), но и с новым официальным определением CSS (восьмым по счету), кучей новых возможностей для работы с текстом и цветами, гридами, незаметно «доросшими» аж до 3 уровня (именно туда вошел черновик стандарта Masonry-раскладки), и множеством других полезных мелочей. Следите за новинками вместе с нами!

P.S. Это тоже может быть интересно:

• «Запашки» кода React-компонентов
• Новогодние подарки Рабочей группы CSS: значения и единицы 4 уровня, медиавыражения 4 и 5 уровней
• Псевдокласс :has() — не только «родительский селектор»