Добавление стилей в слои

Можно добавлять стили в слой непосредственно (внутри блока @layer) или через @import, чтобы назначить импортируемой таблице стилей определённый слой.

Поместите правила внутрь блока @layer с именем слоя:

Можно добавлять стили в один слой в нескольких отдельных блоках @layer. Все объявления объединяются в этом слое:

Блок @layer без имени создаёт анонимный слой. К анонимным слоям нельзя добавлять стили позже, и они существуют в том месте, где появились:

Назначьте целую импортируемую таблицу стилей определённому слою:

В модульном проекте каждый файл компонента добавляет стили в слой компонентов:

Sass и PostCSS работают вместе с @layer. Можно определить слои в основном входном файле и использовать @use или @import, чтобы подключить файлы-фрагменты компонентов, добавляющие стили в эти слои.

Встроенные стили (атрибут style="") не зависят от слоёв и всегда имеют преимущество над стилями любого слоя. В слои можно помещать только правила таблицы стилей, включая блоки <style>.

Chrome DevTools показывает границы слоёв на панели «Стили». Правила из слоя с более низким приоритетом, переопределённые слоем с более высоким приоритетом, отображаются перечёркнутыми, а выигравший слой указывается рядом.

Браузеры, не поддерживающие @layer, воспринимают все блоки @layer как стандартные блоки CSS и отображают всё содержимое. Поведение каскада отличается, но стили не теряются. Для безопасности заключайте код, зависящий от этой возможности, в @supports (@layer selector).

Стратегия переноса:

1. объявите слои в начале основного файла CSS
2. поместите каждый существующий раздел CSS в соответствующий блок слоя
3. проверьте результат и исправьте возникающие проблемы с приоритетом
4. со временем удалите ненужные селекторы с высокой специфичностью

Как добавить стили из нескольких отдельных блоков @layer в один слой с тем же именем?

Добавляйте стили в слои с помощью именованных блоков @layer name { }; такие блоки можно разделять между файлами, и все они будут объединены. Назначайте импортируемым таблицам стилей слои с помощью @import layer(). Анонимные слои нельзя открыть повторно. Встроенные стили всегда переопределяют стили, объявленные в слоях.