0Pricing
CSS Academy · Lesson

@layer Declaration and Ordering

Declare named cascade layers and control their priority order with @layer statements.

@layer Declaration and Ordering is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is @layer?

CSS cascade layers (@layer) provide a mechanism to explicitly control the priority of CSS rules in the cascade — independent of specificity. Lower-priority layers lose even when they have higher specificity selectors.

Why @layer Matters

Without layers, every CSS rule competes using specificity and source order. This leads to specificity wars when reset, component, and utility styles all fight for priority. Layers give each group a fixed, predictable priority.

Declaring Layers

Declare layers upfront in a single statement. The order of declaration determines priority — later layers win over earlier ones.

@layer reset, base, components, utilities;
/* utilities wins over components, which wins over base, which wins over reset */

Layer Declaration Position

The @layer declaration should be at the top of your stylesheet (or main import file). You can add styles to layers in any order after the declaration — the priority is determined by the declaration order, not where styles are added.

Why Source Order Does Not Matter for Layers

Because layer priority is determined at declaration time, you can add styles to a layer anywhere — even before it has been declared, by forward-referencing. The declared order is what matters.

Layer Priority Rule

A declaration in a later layer always wins over a declaration in an earlier layer, regardless of specificity:

@layer reset, components;

@layer components {
  #header { color: blue; } /* ID specificity */
}

@layer reset {
  p { color: red !important; } /* !important in earlier layer */
  /* reset layer declarations lose to components by default */
}

Unlayered Styles

Styles placed outside any layer are called unlayered. They have the highest priority — even higher than the last declared layer. Use this for emergency overrides that should always win.

The Priority Stack

Complete priority order (highest to lowest for author styles):

  1. Unlayered styles (outside any @layer)
  2. Last declared layer (e.g., utilities)
  3. Second-to-last (e.g., components)
  4. Earlier layers (base, reset)

!important Reversal in Layers

!important in layers is tricky: it reverses layer order for that declaration. !important in the earliest layer wins over !important in later layers. This matches the original cascade behavior for user vs author styles.

Nested Layers

Layers can be nested using dot notation:

@layer base.reset, base.typography;

@layer base {
  @layer reset { /* inner layer */ }
}

Practical Setup Example

A realistic project layer setup:

@layer
  vendor,      /* third-party CSS */
  reset,       /* normalize */
  tokens,      /* design tokens */
  base,        /* element defaults */
  layout,      /* grid/flex patterns */
  components,  /* UI components */
  utilities;   /* overrides */

Quick Check

Layers are declared as: @layer base, components, utilities. Which layer's styles win in a conflict?

Recap

@layer establishes explicitly ordered cascade layers. Declare layer names in priority order (lowest first). Later layers always win over earlier ones, independent of specificity. Unlayered styles have the highest priority. !important reverses layer priority order for that declaration.

Frequently asked questions

Is the “@layer Declaration and Ordering” lesson free?

Yes — the full text of “@layer Declaration and Ordering” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “@layer Declaration and Ordering”?

Declare named cascade layers and control their priority order with @layer statements. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “@layer Declaration and Ordering” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. @layer Declaration and Ordering
  2. Adding Styles to Layers
  3. Layer Priority and !important Interaction
  4. Layers in Third-Party Code
← Back to CSS Academy