Кратко

  • Первый публичный проект CSS Cascade Level 5 вышел у W3C 19 января 2021 года и включал @layer. Авторы получили способ задать порядок целых групп стилей до спора селекторов о специфичности.
  • В документе W3C со статусом Candidate Recommendation Snapshot от 13 января 2022 года обычные объявления из более позднего слоя побеждают ранние, а для !important направление меняется. Обычные правила вне слоёв попадают в подразумеваемый последний слой.

Одну кнопку собирали сразу из нескольких гардеробов. Сброс стилей оставлял её почти без украшений, общая библиотека добавляла фирменный цвет, а срочная правка страницы требовала своего оттенка. У браузера давно был порядок разрешения споров. Люди же удлиняли селекторы, когда хотели победить, и повторяли упражнение после очередного обновления библиотеки. Получался аукцион, где ставкой служили лишние классы и идентификаторы.

Первый публичный проект W3C от 19 января 2021 года предложил способ назначать приоритет не каждой реплике, а целым группам реплик. @layer собирает стили в слои и позволяет задать их порядок. В объявлении рабочей группы CSS подчёркивалось, что для этого не требуется переписывать селекторы и менять специфичность внутри слоя. Соседние файлы больше не обязаны состязаться лишь удачным местом в очереди загрузки.

Представим отдельные слои для сброса, общей библиотеки, компонентов и местных поправок. При споре обычных объявлений одного свойства более поздний слой имеет преимущество перед ранним, если остальные старшие критерии каскада совпадают. Специфичность селектора сравнивается позже. Замысловатый селектор раннего слоя может уступить простому классу из позднего. Команде больше не нужно строить башню из #id, чтобы закрепить решение для своей страницы.

У восклицательного знака другой план рассадки. Для объявлений с !important выигрывает более ранний слой. Снимок Candidate Recommendation от 13 января 2022 года фиксирует обе стороны порядка в правилах сортировки каскада: положение слоя учитывается раньше специфичности. Поэтому расследование внезапно фиолетовой кнопки начинается с вопроса о важности объявления. Иначе можно уверенно читать список гостей с неправильного конца.

Правила, которым слой явно не назначили, тоже участвуют в вечеринке. В модели 2022 года их помещают в подразумеваемый последний слой. Для обычных объявлений это сильнее любого именованного слоя. Старый кусочек CSS за пределами новой схемы способен обойти тщательно продуманное распределение ролей. Рабочий проект от 29 августа 2021 года сохранил историю изменения именно этого порядка по сравнению с первой публикацией. Спецификация менялась, пока авторы разбирались с реальными последствиями.

В том же августовском проекте появился revert-layer: свойство может вернуться к значению, которое пришло бы из предыдущего слоя. Слои можно вкладывать друг в друга, а импортированные стили назначать определённому слою. Это помогает выразить договорённость между общей основой и конкретной страницей прямо в структуре стилей. Селектор больше не обязан изображать должностную инструкцию всего сайта.

История публикаций W3C показывает путь от первого публичного проекта января 2021 года до снимка Candidate Recommendation января 2022-го. Изменения в обращении с правилами вне слоёв и появление revert-layer важны для точного чтения этой истории. Не всякое свойство, описанное в позднем документе, уже работало так же в самой ранней версии.

Браузер по-прежнему вычисляет один итоговый цвет кнопки, а специфичность по-прежнему решает споры внутри слоя. Но теперь команда может показать, кто в принципе имеет право выступить раньше, не перелистывая сотни строк в поисках самого громкого селектора. Пятничная правка не исчезает. Ей просто выписывают место в зале.