@layer

Це директива, яка дозволяє розбивати CSS на логічні шари й точно задавати порядок їх застосування. На відміну від класичної каскадної моделі, де все залежить від специфічності або того, який файл підключили пізніше, @layer дає змогу керувати каскадом декларативно.

Можна створити шари з іменами reset, base, components, utilities і зафіксувати їхній порядок:

@layer reset, base, components, utilities;

Після цього, незалежно від місця розташування стилів у файлі чи в пакеті, браузер чітко знає, в якій послідовності їх застосовувати.

Це особливо важливо в масштабних проєктах, де на один елемент можуть впливати стилі з різних джерел — наприклад, базові стилі, компоненти, утиліти або сторонні бібліотеки. Без @layer доводиться або боротися зі специфічністю, або покладатися на порядок підключення, що часто веде до неочікуваних результатів. @layer усуває цю невизначеність.

Працює з будь-якими CSS-фреймворками, підтримується в усіх сучасних браузерах. У поєднанні з @import або підключенням стилів із різних джерел дає хорошу основу для модульного й передбачуваного CSS.

MDN

@babichdev

.