CSS Cascade Layers @layer Conflict Fix

/* Wrong — layers not pre-defined, order is unpredictable */
@layer utilities {
    .hidden { display: none; }
}

@layer base {
    .card { display: block; }
}

/* Right — define layer order first */
@layer base, components, utilities;

@layer base {
    .card { display: block; }
}

@layer utilities {
    .hidden { display: none; }
}

/* utilities wins over base because it comes later in the @layer declaration */

/* Layer order (later wins): reset, base, components, utilities */
@layer reset, base, components, utilities;

@layer base {
    .link { color: blue; font-weight: bold; }
}

@layer components {
    .nav-link { color: red; }
    /* This has higher layer precedence than base */
}

/* Unlayered styles always win over layered styles */
.link { color: green; } /* This wins over all layers! */

/* To prevent this, wrap everything in layers */
@layer reset, base, components, utilities;

/* Put all styles inside layers */
@layer base { /* ... */ }
@layer components { /* ... */ }

/* Wrong — flat layers are hard to manage */
@layer base, components, utilities;
@layer base { /* ... */ }
@layer components { /* ... */ }
@layer utilities { /* ... */ }

/* Right — nest layers by concern */
@layer app {
    @layer reset, base, components, utilities;
}

@layer app.base {
    body { font-family: sans-serif; }
}

@layer app.components {
    .card { padding: 1rem; }
}

/* Nested layer order: app.reset < app.base < app.components < app.utilities */

@layer base, components;

@layer base {
    .btn { background: blue; }
}

@layer components {
    .btn { background: red; }
}

/* Wrong — trying to override with !important in lower layer */
@layer base {
    .btn { background: green !important; }
    /* Important within a layer: higher priority than non-important in any layer */
}

/* Best practice: avoid !important in layered systems */

/* Wrong — anonymous layer may be in the wrong position */
@layer {
    .card { padding: 1rem; }
}

/* Right — always name your layers */
@layer base {
    .card { padding: 1rem; }
}

/* Anonymous layers are inserted at the point of declaration */