The @layer at-rule provides a way to group CSS rules into named layers so authors can control cascade precedence without changing selectors or resorting to !important. Conceptually, a layer is a separate cascade namespace: rules assigned to a given layer will be considered as coming from that layer when the cascade resolves conflicts, allowing you to decide which groups of rules should win in a predictable, declarative way. This makes it practical to reserve higher precedence for framework or utility rules, keep component styles lower in the stack, or otherwise partition stylesheets so that conflicts are resolved by layer order rather than by increasing selector specificity.

Layer ordering becomes an explicit part of cascade resolution. The layer an individual rule belongs to is taken into account as a sorting key when determining which rule applies; that means you can make a rule win simply by placing it in a later (higher-precedence) layer. Importantly, layers do not alter selector specificity — they operate at a higher level in the cascade. They also do not supplant the existing importance/origin model: declarations with higher importance or from a higher-priority origin are still considered before layer ordering, and within the layer ordering step the usual specificity and source-order rules continue to apply.

Because layers are declared independently of selector changes, they enable modular development and safer inclusion of third-party styles. Libraries and components can ship styles in their own layers so consumers can decide the order of those layers without editing the library’s selectors. Similarly, a project can organize its own styles into logical layers (e.g., base, components, utilities) to make overrides explicit and easier to reason about. This reduces the need for ad hoc overrides, heavy selector specificity, or widespread use of !important to get the intended result.

Practically, using layers changes how you think about stylesheet composition and collaboration. Debugging and maintenance become more straightforward because you can look at which layer a rule comes from to understand why it won or lost. At the same time, because layer precedence interacts with the rest of the cascade (origin and importance first, then layer order, then specificity and source order), designers should treat layers as an additional ordering mechanism to be used deliberately — not as a substitute for careful selector design or clear stylesheet architecture.

@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}

• layer-nameIs the name of the cascade layer.
• rulesIs the set of CSS rules in the cascade layer.

The following information will show you the current browser support for the CSS at-rule @layer. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.

This at-rule is supported by all modern browsers.

Desktop

Tablets & Mobile