Cascade layers let you decide which group of styles wins, no matter how specific the selectors are. A rule in a later layer beats a rule in an earlier layer, even with lower specificity. This removes most !important hacks.

Declare the layer order

Put this at the very top of your stylesheet. The last layer in the list has the highest priority.

css">@layer reset, base, components, utilities;

Add styles to each layer

@layer reset {
    * {
        margin: 0;
        box-sizing: border-box;
    }
}

@layer base {
    body {
        font-family: system-ui, sans-serif;
    }
}

@layer components {
    .lotgrafix-button {
        background: orangered;
        padding: 10px 20px;
    }
}

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

Override plugin or framework styles

Import third party CSS into a low priority layer, then your own styles win without extra specificity.

@layer vendor, theme;

@import url( "plugin.css" ) layer( vendor );

@layer theme {
    .plugin-button {
        background: orangered;
    }
}

Important notes

• Styles that are not inside any layer always beat layered styles.
• With !important the order is reversed, so earlier layers win.
• Layers can be nested and can be unnamed.