CSS Cascade Layer Priority Order

CSS cascade layers, introduced via the @layer at-rule, allow developers to structure how styles interact by creating explicit boundaries within the CSS cascade. This article breaks down the exact priority order of cascade layers when multiple layers are declared, detailing how declaration order establishes precedence, how unlayered styles factor into the hierarchy, and how the !important flag completely reverses this behavior.

Standard Declaration Order

The priority of cascade layers is determined by the order in which the layers are first introduced in your stylesheet. In normal (non-!important) declarations, later layers override earlier layers.

Consider the following example:

@layer base, components, utilities;

In this definition, the priority order from lowest to highest is:

  1. base (lowest priority)
  2. components
  3. utilities (highest priority)

Even if a selector inside the base layer has a higher specificity (such as an ID selector #header) than a selector in the utilities layer (such as a class .text-center), the rule in utilities wins if both target the same element and property. Layer order takes precedence over selector specificity.

Reopening Layers

You can reopen and add styles to an existing layer at any point in your stylesheets without altering its established priority. The priority is locked when the layer name is first encountered:

@layer components {
  button { color: red; }
}

@layer base {
  button { color: blue; }
}

@layer components {
  button { color: green; }
}

Even though @layer base is written after the first @layer components block, components was declared first. Therefore, the rules inside base have higher priority than components, making the button color blue. To prevent unexpected ordering, it is best practice to declare all layer names upfront at the very top of your CSS file:

@layer base, components, utilities;

Unlayered Styles vs. Layered Styles

Styles declared outside of any @layer have the highest priority among normal declarations. The cascade prioritizes normal styles in the following order (from lowest to highest):

  1. Early declared layers
  2. Later declared layers
  3. Unlayered styles (highest normal priority)
@layer utilities {
  p { color: purple; }
}

p {
  color: black; /* Unlayered style wins over all normal layers */
}

Because unlayered styles always override layered styles, legacy code and standalone rules will consistently take precedence over rules grouped within cascade layers.

Nested Layers

Layers can be nested inside other layers, either directly or using dot notation. The priority of nested layers is evaluated entirely within the scope of their parent layer.

@layer framework {
  @layer theme, components;
}

/* Or using dot notation */
@layer framework.theme, framework.components;

In this scenario:

  • framework.theme has lower priority than framework.components.
  • Both nested layers remain bounded by the overall priority of the parent framework layer relative to other top-level layers.

The !important Reversal Effect

When the !important flag is applied, the layer priority order is completely inverted. The cascade handles !important this way to allow early foundation layers (such as reset or accessibility rules) to override high-priority design or utility layers when critical rules are enforced.

For !important styles, the priority order from lowest to highest is:

  1. Unlayered !important styles (lowest !important priority)
  2. Later declared layers with !important
  3. Earlier declared layers with !important (highest overall priority)
@layer base, utilities;

@layer base {
  p { color: red !important; } /* Highest priority */
}

@layer utilities {
  p { color: blue !important; } /* Overridden by base */
}

p {
  color: green !important; /* Overridden by all layered !important rules */
}

In this situation, the paragraph text will be red.

Summary Priority Hierarchy

When combining both normal and !important rules across layers, the complete priority hierarchy runs as follows (from weakest to strongest):

  1. Normal styles in early layers
  2. Normal styles in later layers
  3. Normal unlayered styles
  4. !important unlayered styles
  5. !important styles in later layers
  6. !important styles in earlier layers