`CSS Cascade Layers (@layer)` în CSS

Selectori și reguli de bază CSS Cascading Level 5

Controlează ordinea cascadei și rezolvă definitiv războiul specificității și al lui !important folosind straturi explicite de stiluri cu @layer.

Sintaxă CSS

@layer reset, base, components, utilities;

Cascade Layers (directiva @layer) oferă dezvoltatorilor control absolut asupra ordinii în care se aplică regulile CSS, introducând un nou nivel de precedență situat deasupra specificității obișnuite a selectorilor.

Înainte de @layer, dacă o bibliotecă externă (precum Bootstrap sau un widget third-party) avea un selector cu specificitate mare (ex: #navbar ul.nav > li.active), erai obligat să scrii selectori urâți și fragili sau să folosești !important pentru a-i suprascrie stilurile. Cu @layer, un selector simplu dintr-un strat superior bate automat un selector oricât de complex dintr-un strat inferior.

Definirea și ordonarea straturilor arhitecturale

/* 1. Declarăm ordinea de prioritate a straturilor la începutul fișierului
   (Straturile declarate mai la dreapta au prioritate mai mare!) */
@layer reset, framework, custom, utilities;

/* 2. Stratul de reset (prioritate mică) */
@layer reset {
    button {
        background: none;
        border: none;
        padding: 0;
    }
}

/* 3. Stratul bibliotecii externe */
@layer framework {
    .btn-alert {
        background-color: #ef4444;
        color: white;
        padding: 12px 24px;
    }
}

/* 4. Stratul tău custom (suprascrie 'framework' chiar și cu specificitate mai mică!) */
@layer custom {
    button {
        background-color: #3858e9; /* Câștigă garantat în fața .btn-alert! */
    }
}

/* 5. Stratul de utilități (prioritate maximă) */
@layer utilities {
    .d-none { display: none; }
}

Regula de Aur a Straturilor

Stilurile care nu aparțin niciunui strat explicit (unlayered styles) au întotdeauna prioritate mai mare decât toate stilurile din interiorul blocurilor @layer. Această proprietate garantează compatibilitatea deplină cu codul moștenit (legacy CSS).