Каскадные слои: @layer

В уроке о каскаде побеждало правило с более сильным селектором. В большом проекте это превращается в борьбу: сброс, стили библиотеки и свои компоненты перебивают друг друга, и селекторы приходится утяжелять. Каскадные слои (@layer) позволяют заранее договориться, какая группа стилей главнее, — независимо от специфичности.

Первый слой

Правила заворачивают в блок @layer имя. Между слоями побеждает тот, что объявлен позже, даже если селектор в нём слабее:

<style>
  @layer base {
    #menu a { color: gray; }
  }
  @layer components {
    .active { color: crimson; }
  }
</style>
 
<nav id="menu"><a href="#" class="active">Активная ссылка</a></nav>

Селектор #menu a намного сильнее класса, но слой components идёт позже — ссылка красная. Специфичность сравнивается только внутри одного слоя.

Порядок слоёв

Порядок удобно задать одной строкой в начале файла: @layer со списком имён через запятую. Дальше блоки слоёв можно писать в любом порядке — важен только этот список:

<style>
  @layer base, components;
 
  @layer components {
    .btn { background: seagreen; }
  }
  @layer base {
    button { padding: 8px 16px; border: none; background: gray; color: white; }
  }
</style>
 
<button class="btn">Зелёная кнопка</button>

Слой base написан ниже, но по списку он первый и проигрывает.

Стили вне слоёв

Правила, которые не попали ни в один слой, сильнее всех слоёв. Так старый код без слоёв продолжает работать, а свои быстрые правки можно писать без @layer:

<style>
  @layer components {
    .note { padding: 8px; background: lightskyblue; }
  }
  p { background: gold; }
</style>
 
<p class="note">Фон жёлтый: правило вне слоя победило класс</p>

Типичный набор слоёв

Часто используют такой порядок — от общего к частному, как разделы файла стилей из прошлого урока:

@layer reset, base, components, utilities;

Файлы и библиотеки в слое

Целый файл кладут в слой при подключении через @import. Это особенно полезно для чужих библиотек: их стили оказываются в раннем слое, и любое своё правило их перебивает без !important:

@import url("library.css") layer(library);
 
@layer library, components;

Правило @import пишут в самом начале файла стилей.

Частая ошибка

Список слоёв в конце файла. Порядок слоёв фиксируется при первом упоминании каждого имени, поэтому поздний список уже ничего не меняет:

<style>
  @layer components {
    .btn { background: seagreen; }
  }
  @layer base {
    button { padding: 8px 16px; border: none; background: gray; color: white; }
  }
  @layer base, components;
</style>
 
<button class="btn">Хотели зелёную</button>

Слой components упомянут первым, base — вторым, и серый фон победил. Пишите строку с порядком слоёв в самом начале.