CSS @layer: управлять порядком каскада

@layer объявляет каскадные слои и задаёт их порядок. Правило из более позднего слоя переопределяет ранний слой независимо от специфичности селектора. Это позволяет держать сброс, базовые стили, компоненты и утилиты в предсказуемом порядке, не повышая специфичность до !important.

Задать порядок слоёв

@layer reset, base, components, utilities;

@layer base {
    .button {
        background: #e5e7eb;
        color: #111827;
    }
}

@layer components {
    .button--primary {
        background: #2563eb;
        color: #ffffff;
    }
}

@layer utilities {
    .text-center {
        text-align: center;
    }
}

Первая строка задаёт порядок: reset самый слабый, utilities самый сильный. Если поменять объявление местами, но оставить имена, порядок не изменится — он фиксируется при первом упоминании слоя. Поэтому список слоёв удобно держать в одном месте, например в начале главного CSS-файла.

Стили вне слоёв имеют приоритет над слоями для обычных объявлений. Это полезно для точечных правок, но может неожиданно перебить компонент. Для !important порядок обратный: важные объявления раннего слоя сильнее позднего. Не смешивайте !important и слои без необходимости.

Подключить сторонний CSS в слой

@import url("normalize.css") layer(reset);
@import url("design-system.css") layer(components);

@import должен идти до остальных правил. Слой можно вложить: @layer components.card { ... } создаст components.card. Ключевое слово revert-layer откатывает значение к предыдущему слою, не удаляя правило полностью.

Слои поддерживаются в Chrome 99+, Firefox 97+ и Safari 15.4+. В старых браузерах @layer игнорируется, а правила внутри могут примениться без ожидаемого порядка; проверяйте базовую совместимость. Слои не заменяют пространства имён и не изолируют стили от страницы полностью — для этого нужны Shadow DOM или @scope.

Не создавайте слой на каждый компонент: обилие имён усложняет отладку. Начните с трёх-четырёх слоёв и добавляйте новый, только если он решает конфликт порядка. Проверяйте итог в DevTools: панель Styles показывает, из какого слоя пришло значение.

Документация: MDN @layer, CSS Cascade Layers.