@layerЦе директива, яка дозволяє розбивати CSS на логічні шари й точно задавати порядок їх застосування. На відміну від класичної каскадної моделі, де все залежить від специфічності або того, який файл підключили пізніше,
@layer дає змогу керувати каскадом декларативно.Можна створити шари з іменами reset, base, components, utilities і зафіксувати їхній порядок:
@layer reset, base, components, utilities;
Після цього, незалежно від місця розташування стилів у файлі чи в пакеті, браузер чітко знає, в якій послідовності їх застосовувати.
Це особливо важливо в масштабних проєктах, де на один елемент можуть впливати стилі з різних джерел — наприклад, базові стилі, компоненти, утиліти або сторонні бібліотеки. Без
@layer доводиться або боротися зі специфічністю, або покладатися на порядок підключення, що часто веде до неочікуваних результатів. @layer усуває цю невизначеність.Працює з будь-якими CSS-фреймворками, підтримується в усіх сучасних браузерах. У поєднанні з
@import або підключенням стилів із різних джерел дає хорошу основу для модульного й передбачуваного CSS.MDN
@babichdev
.