Справочник HTML & CSS

@layer

Группирует стили в каскадные слои: более поздний слой побеждает независимо от специфичности.

Синтаксис

@layer name { … }

Параметры

Параметр	Тип	Описание
@layer a, b;	order	Заранее объявляет порядок слоёв; поздние слои сильнее.
@layer name { … }	block	Помещает правила в слой.

Примеры

Класс в более позднем слое побеждает id в раннем:

<style>
  @layer base, components;
 
  @layer components {
    .btn { background: royalblue; color: white; }
  }
  @layer base {
    button#save { background: lightgray; color: black; }
  }
</style>
 
<button id="save" class="btn">The components layer wins despite the id</button>

Примечания

Объявите порядок слоёв один раз в начале главного CSS-файла. Стили вне слоёв сильнее всех слоёв. Для объявлений с !important порядок обратный. Поддерживается всеми актуальными браузерами с 2022 года.

См. также

!important — Заставляет объявление побеждать все обычные объявления независимо от специфичности.
:where() — Работает как `:is()`, но всегда имеет нулевую специфичность.
@import — Подключает другой CSS-файл в текущий.
inherit, initial, unset, revert — Ключевые слова, которые работают в любом свойстве и по-разному его сбрасывают.
@scope — Применяет правила только внутри заданного элемента (корня области), при желании останавливаясь на внутренней границе.

В учебнике

Каскадные слои: @layer — Правило @layer — как слои меняют каскад, порядок слоёв, стили вне слоёв, подключение файлов и чужих библиотек в слой.

Спасибо, что читаете!