CSS Cascade Layers Guide

Introduction

CSS often has more than one rule that could apply to the same element.

For example:

1button {2  background-color: gray;3}4 5.primary-button {6  background-color: blue;7}

HTML:

1<button class=”primary-button”>2  Save3</button>

The browser needs to decide which background colour wins.

That decision is made by the CSS cascade.

The cascade considers several things, including:

1importance2origin3cascade layers4specificity5source order

Cascade layers give you a way to organise CSS priority deliberately.

They let you say:

1These styles are low-priority.2These styles are medium-priority.3These styles are high-priority.

You do that with @layer.

Example:

1@layer base, components, utilities;

This creates a layer order.

Then you can place CSS inside those layers:

1@layer base {2  button {3    background-color: gray;4  }5}6 7@layer components {8  .primary-button {9    background-color: blue;10  }11}

The components layer comes after the base layer.

For normal CSS declarations, later layers have higher priority.

So the .primary-button background can win over the base button background.

Cascade layers help make CSS priority clearer, especially in larger stylesheets.

What Are Cascade Layers?

Cascade layers are a way to group CSS rules into priority levels.

A layer is a named section of CSS.

Example:

1@layer base {2  body {3    font-family: Arial, sans-serif;4  }5}

Here, the layer is called:

1base

The CSS rule inside that layer styles the body.

You can create several layers:

1@layer reset {2  * {3    box-sizing: border-box;4  }5}6 7@layer base {8  body {9    font-family: Arial, sans-serif;10  }11}12 13@layer components {14  .card {15    padding: 1rem;16  }17}

Each layer has a place in the cascade.

That layer order helps decide which rule wins when rules conflict.

Why Cascade Layers Are Useful

Without cascade layers, CSS priority is often controlled by:

1selector specificity2source order3!important

This can work for small projects.

But in larger projects, it can become difficult to manage.

You may end up with selectors like this:

1.page .main-content .card .card-title {2  color: navy;3}

Then later, you need to override it:

1.card-title {2  color: green;3}

But the override does not work because the earlier selector is more specific.

So you may be tempted to write:

1.card-title {2  color: green !important;3}

That works, but it can make the CSS harder to maintain.

Cascade layers give you another tool.

Instead of increasing specificity or using !important, you can organise style priority at a higher level.

The Basic @layer Syntax

There are two common ways to use @layer.

You can create a layer and put rules inside it:

1@layer base {2  body {3    font-family: Arial, sans-serif;4    color: #222222;5  }6}

You can also declare the layer order first:

1@layer reset, base, components, utilities;

Then add rules to those layers later:

1@layer reset {2  * {3    box-sizing: border-box;4  }5}6 7@layer base {8  body {9    font-family: Arial, sans-serif;10  }11}12 13@layer components {14  .button {15    padding: 0.75rem 1rem;16  }17}18 19@layer utilities {20  .text-center {21    text-align: center;22  }23}

The first line defines the order:

1reset2base3components4utilities

For normal declarations, the later layers have higher priority.

So utilities can override components.

components can override base.

base can override reset.

A Simple Layer Example

CSS:

1@layer base, components;2 3@layer base {4  button {5    background-color: gray;6    color: white;7  }8}9 10@layer components {11  .button-primary {12    background-color: blue;13  }14}

HTML:

1<button class=”button-primary”>2  Save3</button>

The button matches both selectors:

1button

and:

1.button-primary

The final background is blue.

Why?

The components layer comes after the base layer.

For normal declarations, later layers have higher priority.

So the component style wins.

Layer Order Matters

The order of layers matters.

Example:

1@layer base, components;

This means:

1base has lower priority2components has higher priority

Now compare this:

1@layer components, base;

This means:

1components has lower priority2base has higher priority

That would change which rules win.

For normal CSS declarations, the layer declared later has higher priority.

So this order is common:

1@layer reset, base, layout, components, utilities;

This gives the priority structure:

1lowest priority: reset2base3layout4components5highest priority: utilities

Declaring Layers Up Front

A good practice is to declare your layer order near the top of your CSS file.

Example:

1@layer reset, base, layout, components, utilities;

This makes the priority structure clear before the rest of the stylesheet begins.

Then you can add rules to those layers:

1@layer reset {2  *,3  *::before,4  *::after {5    box-sizing: border-box;6  }7}8 9@layer base {10  body {11    margin: 0;12    font-family: Arial, sans-serif;13  }14}15 16@layer components {17  .card {18    padding: 1rem;19    border: 1px solid #dddddd;20  }21}22 23@layer utilities {24  .mt-0 {25    margin-top: 0;26  }27}

The first @layer statement tells the browser the intended order.

That makes the rest of the CSS easier to understand.

What Happens If You Do Not Declare Layer Order Up Front?

If you create layers without declaring the full order first, the order is based on when the layers first appear.

Example:

1@layer components {2  .button {3    background-color: blue;4  }5}6 7@layer base {8  button {9    background-color: gray;10  }11}

Here, the components layer appears first.

The base layer appears second.

For normal declarations, the later layer has higher priority.

So base can override components.

That may not be what you wanted.

This is why declaring the layer order up front is useful:

1@layer base, components;

Now the intended order is clear.

Even if the components rules appear earlier in the file, the declared layer order still controls priority.

Normal Layer Priority

For normal declarations, later layers win over earlier layers.

Example:

1@layer first, second;2 3@layer first {4  .box {5    color: red;6  }7}8 9@layer second {10  .box {11    color: blue;12  }13}

HTML:

1<div class=”box”>Text</div>

The text becomes blue.

Both selectors are the same.

Both declarations are normal.

The second layer has higher priority than the first layer.

So blue wins.

A Later Layer Can Beat Higher Specificity

This is one of the most important features of cascade layers.

A low-specificity selector in a later layer can beat a high-specificity selector in an earlier layer.

Example:

1@layer base, utilities;2 3@layer base {4  main .content .card p {5    color: gray;6  }7}8 9@layer utilities {10  .text-blue {11    color: blue;12  }13}

HTML:

1<main>2  <div class=”content”>3    <div class=”card”>4      <p class=”text-blue”>This text is blue.</p>5    </div>6  </div>7</main>

The paragraph becomes blue.

Why?

The selector in the base layer is more specific:

1main .content .card p

The selector in the utilities layer is less specific:

1.text-blue

But utilities is a later layer.

Layer priority is considered before specificity.

So the later utilities layer wins.

This is useful because it lets utility classes override lower-priority CSS without using extremely specific selectors.

Specificity Still Matters Inside the Same Layer

Cascade layers do not remove specificity.

Specificity still matters when rules are in the same layer.

Example:

1@layer components {2  p {3    color: black;4  }5 6  .intro {7    color: navy;8  }9}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes navy.

Both declarations are in the same layer.

So the browser compares specificity.

The class selector is more specific than the type selector.

So .intro wins.

Source Order Still Matters Inside the Same Layer

Source order also still matters inside the same layer.

Example:

1@layer components {2  .message {3    color: green;4  }5 6  .message {7    color: blue;8  }9}

HTML:

1<p class=”message”>2  Your settings were saved.3</p>

The paragraph becomes blue.

Both selectors are the same.

Both rules are in the same layer.

Both declarations have equal specificity.

The later declaration wins.

Cascade layers add a priority level above specificity, but the normal cascade still works inside each layer.

Layer Priority Comes Before Specificity

A useful simplified order is:

1importance2layer order3specificity4source order

This is simplified, but it helps explain everyday layer behaviour.

For normal author styles:

1Layer order is checked before specificity.

That means this can happen:

1@layer base, components;2 3@layer base {4  #main .card .title {5    color: red;6  }7}8 9@layer components {10  .title {11    color: blue;12  }13}

HTML:

1<div id=”main”>2  <div class=”card”>3    <h2 class=”title”>Card title</h2>4  </div>5</div>

The title becomes blue.

The base selector is much more specific.

But the components layer has higher priority.

The later layer wins.

Why This Is Helpful

This solves a common CSS problem.

Without layers, highly specific selectors can be hard to override.

Example without layers:

1#main .card .title {2  color: red;3}4 5.title {6  color: blue;7}

The title stays red.

The ID selector is too specific.

With layers:

1@layer base, components;2 3@layer base {4  #main .card .title {5    color: red;6  }7}8 9@layer components {10  .title {11    color: blue;12  }13}

The title becomes blue.

The layer order gives the component layer higher priority.

You do not need !important.

You do not need an even more specific selector.

A Common Layer Structure

A useful layer structure is:

1@layer reset, base, layout, components, utilities;

Each layer has a purpose.

The reset layer contains low-priority reset or normalisation styles.

The base layer contains site-wide element defaults.

The layout layer contains layout structures.

The components layer contains reusable UI components.

The utilities layer contains small helper classes that should be easy to apply as overrides.

The priority order is:

1reset2base3layout4components5utilities

The later layers have more power for normal declarations.

The reset Layer

The reset layer is usually low priority.

It contains styles that remove or normalise browser defaults.

Example:

1@layer reset {2  *,3  *::before,4  *::after {5    box-sizing: border-box;6  }7 8  body {9    margin: 0;10  }11 12  img {13    max-width: 100%;14    display: block;15  }16}

These rules should be easy to override later.

That is why reset is usually one of the first layers.

The base Layer

The base layer contains general element styles.

Example:

1@layer base {2  body {3    font-family: Arial, sans-serif;4    color: #222222;5    line-height: 1.6;6  }7 8  h1,9  h2,10  h3 {11    line-height: 1.2;12  }13 14  a {15    color: #2563eb;16  }17}

These are broad defaults.

They set the basic look of the site.

They should usually be easier to override than component or utility styles.

The layout Layer

The layout layer contains page structure and layout patterns.

Example:

1@layer layout {2  .container {3    width: min(100% – 2rem, 1100px);4    margin-inline: auto;5  }6 7  .grid {8    display: grid;9    gap: 1rem;10  }11 12  .sidebar-layout {13    display: grid;14    grid-template-columns: 250px 1fr;15    gap: 2rem;16  }17}

These rules control structure.

They are more specific to layout than base element defaults.

But they may still be lower priority than component-specific or utility styles.

The components Layer

The components layer contains reusable interface pieces.

Examples:

1@layer components {2  .button {3    display: inline-block;4    padding: 0.75rem 1rem;5    border-radius: 6px;6    background-color: #2563eb;7    color: white;8    text-decoration: none;9  }10 11  .card {12    padding: 1rem;13    border: 1px solid #dddddd;14    border-radius: 8px;15    background-color: white;16  }17 18  .alert {19    padding: 1rem;20    border-radius: 8px;21    background-color: #fef3c7;22    color: #92400e;23  }24}

Component styles usually need to override base styles.

For example, base link styles might say:

1a {2  color: #2563eb;3}

But a button link might need white text:

1.button {2  color: white;3}

Putting .button in the components layer makes that priority clear.

The utilities Layer

The utilities layer contains small, single-purpose classes.

Examples:

1@layer utilities {2  .text-center {3    text-align: center;4  }5 6  .text-red {7    color: red;8  }9 10  .mt-0 {11    margin-top: 0;12  }13 14  .hidden {15    display: none;16  }17}

Utilities are often intended to override component defaults.

Example:

1@layer components {2  .card {3    text-align: left;4  }5}6 7@layer utilities {8  .text-center {9    text-align: center;10  }11}

HTML:

1<div class=”card text-center”>2  This card text is centred.3</div>

The text becomes centred.

The utility layer comes after the component layer.

So .text-center can override .card.

Complete Layer Example

Here is a small complete example:

1@layer reset, base, components, utilities;2 3@layer reset {4  * {5    box-sizing: border-box;6  }7 8  body {9    margin: 0;10  }11}12 13@layer base {14  body {15    font-family: Arial, sans-serif;16    color: #222222;17    line-height: 1.6;18  }19 20  a {21    color: #2563eb;22  }23}24 25@layer components {26  .button {27    display: inline-block;28    padding: 0.75rem 1rem;29    border-radius: 6px;30    background-color: #2563eb;31    color: white;32    text-decoration: none;33  }34}35 36@layer utilities {37  .text-red {38    color: red;39  }40}

HTML:

1<a class=”button text-red” href=”/delete”>2  Delete3</a>

The link has these relevant styles:

1base layer:2a { color: #2563eb; }3 4components layer:5.button { color: white; }6 7utilities layer:8.text-red { color: red; }

The final colour is red.

The utilities layer has the highest priority.

So .text-red wins.

Layers Make Priority Explicit

Without layers, you might depend heavily on source order and specificity.

Example:

1.button {2  color: white;3}4 5.text-red {6  color: red;7}

This works if .text-red appears later.

But if files are reorganised, the result could change.

With layers:

1@layer components, utilities;2 3@layer utilities {4  .text-red {5    color: red;6  }7}8 9@layer components {10  .button {11    color: white;12  }13}

Even though the utility rule appears earlier in the file, it still has higher priority because the layer order says:

1components2utilities

The declared layer order controls priority.

That makes the CSS more predictable.

Layer Order Is Not the Same as File Order

This is important.

Once you declare the layer order, that order controls layer priority.

Example:

1@layer base, components, utilities;2 3@layer utilities {4  .text-blue {5    color: blue;6  }7}8 9@layer base {10  p {11    color: black;12  }13}

HTML:

1<p class=”text-blue”>Text</p>

The text becomes blue.

The utilities rules appear earlier in the file.

But the utilities layer was declared after base in the layer order.

So it has higher priority.

The declaration order at the top matters more than where the layer block appears later.

Adding to an Existing Layer

You can add rules to the same layer in multiple places.

Example:

1@layer base, components;2 3@layer components {4  .button {5    padding: 0.75rem 1rem;6  }7}8 9@layer components {10  .card {11    padding: 1rem;12  }13}

Both .button and .card are in the components layer.

They are part of the same layer.

Inside the same layer, normal specificity and source order apply.

This is useful when CSS is split across files.

Different files can contribute rules to the same layer.

Anonymous Layers

You can create a layer without a name:

1@layer {2  p {3    color: navy;4  }5}

This is called an anonymous layer.

It can be useful in some cases, but named layers are usually clearer.

With a named layer, you can refer to it later:

1@layer base {2  p {3    color: navy;4  }5}

Then add more rules to it:

1@layer base {2  h1 {3    color: #111827;4  }5}

For most projects, named layers are easier to organise and debug.

Unlayered Styles

CSS does not have to be inside a layer.

Example:

1@layer base {2  p {3    color: black;4  }5}6 7p {8  color: red;9}

The second rule is unlayered.

For normal declarations, unlayered author styles have higher priority than layered author styles.

So the paragraph becomes red.

This is important.

Unlayered styles can override layered styles even if the unlayered selector is less specific.

Unlayered Styles Example

CSS:

1@layer components {2  .card p {3    color: navy;4  }5}6 7p {8  color: black;9}

HTML:

1<div class=”card”>2  <p>This paragraph is black.</p>3</div>

The paragraph becomes black.

Why?

The p rule is unlayered.

For normal declarations, unlayered author styles have higher priority than layered author styles.

This can surprise people.

If you decide to use layers, it is usually best to put most or all of your author CSS into layers.

Why Unlayered Styles Can Be Dangerous

Suppose you create this layer structure:

1@layer reset, base, components, utilities;

Then you write this later:

1.card {2  padding: 2rem;3}

That .card rule is not inside a layer.

It is unlayered.

For normal declarations, it can override layered styles.

That may break your intended priority system.

A better version is:

1@layer components {2  .card {3    padding: 2rem;4  }5}

If you are using cascade layers, be intentional about whether a rule is layered or unlayered.

Should Everything Be Layered?

You do not have to layer every rule.

But for a clear system, it often helps to put most project styles into layers.

Example:

1@layer reset, base, layout, components, utilities;

Then use those layers consistently:

1@layer components {2  .card {3    padding: 1rem;4  }5}

Avoid accidentally writing important project styles outside your layers.

Unlayered normal styles sit above layered normal styles in priority.

That can make your layer system less predictable.

Importing CSS into Layers

You can import a stylesheet into a layer.

Example:

1@import url(“reset.css”) layer(reset);2@import url(“components.css”) layer(components);3@import url(“utilities.css”) layer(utilities);

This places the imported CSS into named layers.

A full setup might look like this:

1@layer reset, base, components, utilities;2 3@import url(“reset.css”) layer(reset);4@import url(“base.css”) layer(base);5@import url(“components.css”) layer(components);6@import url(“utilities.css”) layer(utilities);

This is useful when your CSS is split across files.

It lets each file participate in the same cascade layer system.

Layering Third-Party CSS

Cascade layers are useful for third-party CSS.

Suppose you use a third-party library.

You can put it in a low-priority layer:

1@layer vendor, base, components, utilities;2 3@import url(“vendor.css”) layer(vendor);

Then your project styles can override it more easily:

1@layer components {2  .button {3    background-color: #2563eb;4  }5}

The components layer comes after the vendor layer.

So your component styles can override vendor styles without needing overly specific selectors.

This is one of the best uses of cascade layers.

Example: Overriding Vendor CSS

Vendor CSS:

1.button {2  background-color: gray;3  color: black;4}

Import it into a layer:

1@layer vendor, components;2 3@import url(“vendor.css”) layer(vendor);4 5@layer components {6  .button {7    background-color: blue;8    color: white;9  }10}

The button uses your component styles.

You do not need:

1.button {2  background-color: blue !important;3}

The layer system gives your styles higher priority.

Cascade Layers and !important

Cascade layers have a special relationship with !important.

For normal declarations, later layers have higher priority.

For important declarations, the layer order is reversed.

That means important declarations in earlier layers can have higher priority than important declarations in later layers.

This is advanced, so be careful.

A simple beginner-friendly rule is:

1Avoid mixing cascade layers and !important unless you know why you need it.

Most of the time, layers are useful because they help you avoid !important.

Normal Layer Order Example

For normal declarations:

1@layer base, utilities;2 3@layer base {4  .box {5    color: red;6  }7}8 9@layer utilities {10  .box {11    color: blue;12  }13}

The box is blue.

The utilities layer comes later.

For normal declarations, later layers win.

Important Layer Order Example

Important declarations behave differently.

Example:

1@layer base, utilities;2 3@layer base {4  .box {5    color: red !important;6  }7}8 9@layer utilities {10  .box {11    color: blue !important;12  }13}

The result can be red because important declarations reverse the layer order.

The earlier base layer can beat the later utilities layer when both declarations are important.

This is another reason to avoid unnecessary !important.

Cascade layers are meant to make priority easier to control.

Adding !important can make the priority model more complex.

Layers Reduce the Need for !important

Before cascade layers, utility classes often used !important.

Example:

1.text-center {2  text-align: center !important;3}

With layers, you may be able to avoid that:

1@layer components, utilities;2 3@layer components {4  .card {5    text-align: left;6  }7}8 9@layer utilities {10  .text-center {11    text-align: center;12  }13}

HTML:

1<div class=”card text-center”>2  Centred card text3</div>

The text is centred.

No !important is needed.

The utility layer has higher priority.

Layers and Specificity Strategy

Cascade layers work best when combined with simple selectors.

Example:

1@layer components {2  .card {3    padding: 1rem;4  }5 6  .card-title {7    font-size: 1.5rem;8  }9}

Avoid making selectors more specific than needed:

1@layer components {2  main .page .content .card .card-title {3    font-size: 1.5rem;4  }5}

Layers help with priority, but they do not automatically make messy selectors clean.

Use layers with clear class names and reasonable specificity.

Layers and Component Variants

Cascade layers can help organise component variants.

Example:

1@layer components {2  .button {3    background-color: gray;4    color: white;5  }6 7  .button-primary {8    background-color: blue;9  }10 11  .button-danger {12    background-color: red;13  }14}

HTML:

1<button class=”button button-primary”>2  Save3</button>

All of these rules are in the same layer.

Inside the layer, source order and specificity decide the variant.

The .button-primary rule comes after .button.

So it can override the background.

You do not need separate layers for every small variation.

Use layers for broad priority groups.

Use classes and source order inside layers for component details.

Layers and Utility Classes

Utilities often belong in a high-priority layer.

Example:

1@layer components, utilities;2 3@layer components {4  .card {5    margin-top: 2rem;6    color: navy;7  }8}9 10@layer utilities {11  .mt-0 {12    margin-top: 0;13  }14 15  .text-red {16    color: red;17  }18}

HTML:

1<div class=”card mt-0 text-red”>2  Card content3</div>

The card has:

1margin-top: 0;2color: red;

The utilities override the component defaults.

That is usually the purpose of utility classes.

Layers and Base Styles

Base styles should usually be easy to override.

Example:

1@layer base {2  h1 {3    font-size: 2rem;4    color: #111827;5  }6}

Later, a component can override the heading inside a card:

1@layer components {2  .card-title {3    font-size: 1.25rem;4    color: navy;5  }6}

HTML:

1<h2 class=”card-title”>2  Card title3</h2>

The component layer has higher priority.

So component-specific heading styles can override base heading styles.

Layers and Resets

Resets are ideal for a low-priority layer.

Example:

1@layer reset, base, components;2 3@layer reset {4  h1,5  h2,6  p {7    margin: 0;8  }9}10 11@layer base {12  p {13    margin-bottom: 1rem;14  }15}

The base paragraph margin can override the reset paragraph margin.

That is useful.

The reset creates a clean starting point.

The base layer adds desired defaults.

Layers and Browser Defaults

Cascade layers organise your author CSS.

They do not remove browser defaults by themselves.

Example:

1@layer base {2  body {3    font-family: Arial, sans-serif;4  }5}

The browser still has default styles for headings, links, lists, and form controls.

Your layered CSS participates in the cascade along with those defaults.

A reset layer can help normalise browser defaults:

1@layer reset {2  h1,3  h2,4  p {5    margin: 0;6  }7}

Then later layers can add your preferred styles.

Layers and Inheritance

Cascade layers decide which declarations win.

Inheritance still works normally.

Example:

1@layer base {2  body {3    color: #333333;4  }5}6 7@layer components {8  .alert {9    color: darkred;10  }11}

HTML:

1<div class=”alert”>2  <p>This paragraph inherits dark red.</p>3</div>

The .alert gets color: darkred.

The paragraph inherits that final colour from its parent.

Layers help decide the parent’s final value.

Then inheritance passes that value down.

Layers and Source Order

Source order still matters, but mostly within the same layer.

Example:

1@layer components {2  .box {3    color: red;4  }5 6  .box {7    color: blue;8  }9}

The box becomes blue.

Both rules are in the same layer.

Both selectors are equal.

The later rule wins.

But compare this:

1@layer base, components;2 3@layer components {4  .box {5    color: blue;6  }7}8 9@layer base {10  .box {11    color: red;12  }13}

The box is blue.

The base rule appears later in the file.

But the components layer has higher priority.

Layer order beats source order across layers.

Layer Order Beats Source Order Across Layers

This example is important:

1@layer low, high;2 3@layer high {4  .box {5    color: blue;6  }7}8 9@layer low {10  .box {11    color: red;12  }13}

HTML:

1<div class=”box”>Text</div>

The text is blue.

Even though the low layer rule appears later, the high layer has higher priority.

Source order only decides between rules when the earlier cascade factors are equal.

Here, layer priority is not equal.

Layers and Media Queries

You can use media queries inside layers.

Example:

1@layer layout {2  .grid {3    display: grid;4    gap: 1rem;5  }6 7  @media (min-width: 700px) {8    .grid {9      grid-template-columns: 1fr 1fr;10    }11  }12}

You can also put layers inside media queries, but it is usually clearer to keep your layer structure simple.

A common pattern is:

1@layer reset, base, layout, components, utilities;2 3@layer layout {4  .container {5    width: min(100% – 2rem, 1100px);6    margin-inline: auto;7  }8 9  @media (min-width: 900px) {10    .two-column {11      display: grid;12      grid-template-columns: 1fr 1fr;13    }14  }15}

The media query controls when the rule applies.

The layer controls its priority.

Layers and @supports

You can also use feature queries inside layers.

Example:

1@layer layout {2  .card-grid {3    display: block;4  }5 6  @supports (display: grid) {7    .card-grid {8      display: grid;9      gap: 1rem;10    }11  }12}

This keeps the layout rules in the layout layer.

The @supports condition decides whether the grid styles apply.

Again, the layer controls priority.

The condition controls whether the rule is active.

Nested Layers

Layers can be nested.

Example:

1@layer framework {2  @layer reset {3    * {4      box-sizing: border-box;5    }6  }7 8  @layer components {9    .button {10      padding: 0.75rem 1rem;11    }12  }13}

This creates sublayers inside a parent layer.

They can be referred to with dot notation:

1@layer framework.reset;2@layer framework.components;

Nested layers are useful for advanced organisation.

For most beginner projects, simple top-level layers are enough:

1@layer reset, base, components, utilities;

Start simple.

Naming Layers

Layer names should describe priority groups.

Good names:

1reset2base3layout4components5utilities6vendor7theme8overrides

Less useful names:

1blue-stuff2misc3random4new-css5fixes

A layer name should help you understand why the rules are grouped together.

Example:

1@layer vendor, reset, base, components, utilities;

This tells you the intended priority system.

Vendor styles are lowest.

Utilities are highest.

Avoid Too Many Layers

Cascade layers are useful, but you do not need a layer for everything.

This is probably too much:

1@layer reset, typography, forms, buttons, cards, modals, nav, footer, utilities, overrides;

It might be useful in a large project.

But for a small project, it can be too complex.

Start with a simple structure:

1@layer reset, base, components, utilities;

Then add more layers only if they solve a real organisation problem.

Do Not Use Layers as a Dumping Ground

This is not helpful:

1@layer stuff {2  .card {3    padding: 1rem;4  }5 6  body {7    margin: 0;8  }9 10  .text-center {11    text-align: center;12  }13}

The layer name stuff does not explain priority or purpose.

A better structure is:

1@layer reset {2  body {3    margin: 0;4  }5}6 7@layer components {8  .card {9    padding: 1rem;10  }11}12 13@layer utilities {14  .text-center {15    text-align: center;16  }17}

The layer names make the CSS easier to reason about.

Do Not Replace Good CSS Structure with Layers

Layers are not a substitute for clear CSS.

This is still hard to maintain:

1@layer components {2  .page .section .content .card .header .title {3    color: navy;4  }5}

Even inside a layer, overly specific selectors can cause problems.

Better:

1@layer components {2  .card-title {3    color: navy;4  }5}

Use layers to organise priority.

Use good selectors to organise components.

You need both.

A Practical Page Example

HTML:

1<article class=”article”>2  <h1 class=”article-title”>Cascade Layers</h1>3  <p class=”article-intro text-muted”>4    Layers help organise CSS priority.5  </p>6  <a class=”button” href=”/learn”>Learn more</a>7</article>

CSS:

1@layer reset, base, components, utilities;2 3@layer reset {4  h1,5  p {6    margin: 0;7  }8}9 10@layer base {11  body {12    font-family: Arial, sans-serif;13    color: #222222;14    line-height: 1.6;15  }16 17  a {18    color: #2563eb;19  }20}21 22@layer components {23  .article {24    max-width: 700px;25    margin-inline: auto;26    padding: 2rem;27  }28 29  .article-title {30    color: #111827;31    margin-bottom: 1rem;32  }33 34  .button {35    display: inline-block;36    padding: 0.75rem 1rem;37    background-color: #2563eb;38    color: white;39    text-decoration: none;40  }41}42 43@layer utilities {44  .text-muted {45    color: #666666;46  }47}

The text-muted utility can override inherited or component text colour.

The .button component can override the base link colour.

The reset remains low priority.

The structure is clear.

A Practical Vendor Example

Suppose a vendor stylesheet styles buttons.

Vendor CSS:

1.button {2  background-color: gray;3  color: black;4  padding: 0.5rem;5}

Your CSS:

1@layer vendor, components;2 3@import url(“vendor.css”) layer(vendor);4 5@layer components {6  .button {7    background-color: #2563eb;8    color: white;9    padding: 0.75rem 1rem;10  }11}

Your button styles win because the components layer has higher priority.

You do not need to write:

1.button {2  background-color: #2563eb !important;3}

This is cleaner and easier to maintain.

A Practical Utility Example

CSS:

1@layer components, utilities;2 3@layer components {4  .card {5    padding: 1rem;6    background-color: white;7    color: #222222;8  }9}10 11@layer utilities {12  .text-blue {13    color: #2563eb;14  }15 16  .p-0 {17    padding: 0;18  }19}

HTML:

1<div class=”card text-blue p-0″>2  Card content3</div>

The final card styles include:

1padding: 0;2color: #2563eb;3background-color: white;

The utility classes override the component padding and colour.

The component still provides the background.

This is the purpose of the utility layer.

A Practical Reset and Base Example

CSS:

1@layer reset, base;2 3@layer reset {4  h1,5  h2,6  p {7    margin: 0;8  }9}10 11@layer base {12  p {13    margin-bottom: 1rem;14  }15}

HTML:

1<p>This paragraph has base spacing.</p>

The paragraph gets margin-bottom: 1rem.

The reset layer removed default margin.

The base layer added project-specific paragraph spacing.

Because base comes after reset, it wins.

Debugging Cascade Layers

When a style does not apply, ask these questions:

1Is the rule inside a layer?2Is the competing rule inside a different layer?3Which layer has higher priority?4Is one rule unlayered?5Are both declarations normal, or is !important involved?6Are the rules in the same layer?7If they are in the same layer, which selector is more specific?8If specificity is equal, which rule comes later?

This is the layer-aware version of CSS debugging.

Browser developer tools can help show which declarations are active and which are overridden.

Common Mistake: Forgetting the Layer Order

This can be confusing:

1@layer utilities {2  .text-red {3    color: red;4  }5}6 7@layer components {8  .card {9    color: navy;10  }11}

If there is no earlier layer order declaration, the first layer created is utilities.

The second layer created is components.

For normal declarations, the later layer has higher priority.

So components can override utilities.

That may be the opposite of what you intended.

Fix it by declaring the order up front:

1@layer components, utilities;

Now utilities have higher priority.

Common Mistake: Leaving Styles Unlayered

Example:

1@layer components {2  .button {3    color: white;4  }5}6 7.button {8  color: black;9}

The button becomes black.

The second rule is unlayered.

For normal declarations, unlayered author styles have higher priority than layered author styles.

If this was accidental, put the rule into a layer:

1@layer components {2  .button {3    color: black;4  }5}

or into a higher-priority layer:

1@layer utilities {2  .text-black {3    color: black;4  }5}

Common Mistake: Expecting Specificity to Beat Layer Order

Example:

1@layer low, high;2 3@layer low {4  #main .card .title {5    color: red;6  }7}8 9@layer high {10  .title {11    color: blue;12  }13}

The title becomes blue.

The high layer wins before specificity is compared.

This is not a bug.

This is the point of cascade layers.

Layer order lets you override specific selectors without writing even more specific selectors.

Common Mistake: Using !important Too Quickly

If a layer override does not work, do not immediately add !important.

First check:

1Is the rule in the correct layer?2Is another rule unlayered?3Was the layer order declared correctly?4Are you dealing with an important declaration?

Often, the fix is to move the rule into the right layer.

Example:

1@layer components {2  .button {3    color: white;4  }5}6 7@layer utilities {8  .text-red {9    color: red;10  }11}

This is usually better than:

1.text-red {2  color: red !important;3}

Common Mistake: Making Too Many Priority Levels

Cascade layers should simplify priority.

They should not create confusion.

This may be too many layers for a small site:

1@layer reset, defaults, elements, typography, layout, grid, cards, buttons, forms, helpers, overrides;

A simpler version may be better:

1@layer reset, base, layout, components, utilities;

Start simple.

Add layers only when you need them.

When to Use Cascade Layers

Cascade layers are useful when:

1your CSS project is growing2you use third-party styles3you want utility classes to override components without !important4you want resets to stay low priority5you want base styles to be easy to override6you want clearer control over style priority

They are especially helpful when CSS comes from multiple sources.

Examples:

1browser defaults2reset CSS3vendor CSS4your base styles5component CSS6utility classes7theme overrides

Layers let you organise those sources deliberately.

When You May Not Need Cascade Layers

For a very small stylesheet, cascade layers may be unnecessary.

Example:

1body {2  font-family: Arial, sans-serif;3}4 5.button {6  background-color: blue;7}

If your CSS is simple and easy to manage, you may not need layers yet.

Cascade layers are most useful when priority becomes difficult to control.

Use them when they solve a real problem.

Choosing a Layer Order

A common order is:

1@layer vendor, reset, base, layout, components, utilities;

This gives the priority order:

1vendor2reset3base4layout5components6utilities

Meaning:

1vendor styles are easiest to override2reset styles are low priority3base styles set defaults4layout styles control structure5component styles define UI parts6utility styles are high priority helpers

You can adjust this for your project.

For example, if you have theme styles, you might use:

1@layer reset, base, components, themes, utilities;

The best order depends on what should override what.

Adding an Overrides Layer

Some projects include an overrides layer.

Example:

1@layer reset, base, components, utilities, overrides;

The overrides layer has the highest normal priority.

It can be used for rare exceptions:

1@layer overrides {2  .checkout-page .button {3    width: 100%;4  }5}

Use this carefully.

If many styles end up in overrides, it may mean your layer structure or component design needs improvement.

An overrides layer should be small.

Cascade Layers vs Specificity

Cascade layers and specificity answer different questions.

Layer order asks:

1Which priority group does this rule belong to?

Specificity asks:

1Within the same priority group, which selector is stronger?

Example:

1@layer base, components;2 3@layer base {4  #main .title {5    color: red;6  }7}8 9@layer components {10  .title {11    color: blue;12  }13}

The component layer wins.

The browser does not use specificity to let the base layer beat the component layer.

Layer priority comes first.

Cascade Layers vs Source Order

Layer order and source order are also different.

Layer order is the declared priority order of layers.

Source order is where rules appear in the stylesheet.

Example:

1@layer base, components;2 3@layer components {4  .title {5    color: blue;6  }7}8 9@layer base {10  .title {11    color: red;12  }13}

The title is blue.

The base rule appears later.

But the components layer has higher priority.

Source order matters when the rules are in the same layer or when layer priority is otherwise equal.

Cascade Layers vs !important

Cascade layers are usually a cleaner way to manage priority.

Example with !important:

1.text-red {2  color: red !important;3}

Example with layers:

1@layer components, utilities;2 3@layer utilities {4  .text-red {5    color: red;6  }7}

If utilities should override components, the layer system can do that without important declarations.

Use layers to reduce the need for !important.

Do not use both unless you understand the result.

A Simple Mental Model

Think of layers like shelves.

Lower-priority CSS goes on lower shelves.

Higher-priority CSS goes on higher shelves.

Example:

1top shelf: utilities2middle shelf: components3lower shelf: base4bottom shelf: reset

When two normal declarations conflict, the rule on the higher shelf wins.

Only if rules are on the same shelf does the browser compare specificity and source order.

This mental model is not complete for every advanced case, but it is useful when starting.

A Step-by-Step Example

HTML:

1<p class=”intro text-blue”>2  Welcome to the page.3</p>

CSS:

1@layer base, components, utilities;2 3@layer base {4  p {5    color: black;6  }7}8 9@layer components {10  .intro {11    color: green;12  }13}14 15@layer utilities {16  .text-blue {17    color: blue;18  }19}

The paragraph matches all three rules.

The base layer says black.

The components layer says green.

The utilities layer says blue.

The final colour is blue.

Why?

The utilities layer has the highest priority.

The browser does not need to compare specificity between layers.

The highest-priority matching layer wins for that property.

Another Step-by-Step Example

HTML:

1<div class=”card”>2  <p class=”text-small”>Card text</p>3</div>

CSS:

1@layer components, utilities;2 3@layer components {4  .card p {5    font-size: 1rem;6  }7}8 9@layer utilities {10  .text-small {11    font-size: 0.875rem;12  }13}

The paragraph becomes 0.875rem.

Why?

The utility layer has higher priority.

The .card p selector is more specific than .text-small.

But layer order comes before specificity.

The utility wins.

Example Without Layers

Without layers, this behaves differently:

1.card p {2  font-size: 1rem;3}4 5.text-small {6  font-size: 0.875rem;7}

HTML:

1<div class=”card”>2  <p class=”text-small”>Card text</p>3</div>

The .card p selector may win because it has higher specificity.

You might need a stronger selector:

1.card p.text-small {2  font-size: 0.875rem;3}

or !important:

1.text-small {2  font-size: 0.875rem !important;3}

With layers, you can avoid that.

Best Practices for Cascade Layers

Declare your layer order near the top of your CSS.

Use a small number of clear layers.

Put low-priority resets in an early layer.

Put base element styles in a base layer.

Put reusable components in a components layer.

Put utility classes in a high-priority utilities layer.

Consider putting third-party CSS in a low-priority vendor layer.

Avoid accidentally leaving project styles unlayered.

Remember that unlayered normal styles override layered normal styles.

Use layers to reduce the need for !important.

Keep selectors simple inside layers.

Do not create too many layers.

Use layer names that explain purpose and priority.

Quick Reference

Basic layer order declaration:

1@layer reset, base, components, utilities;

Add rules to a layer:

1@layer components {2  .button {3    padding: 0.75rem 1rem;4  }5}

Add more rules to the same layer:

1@layer components {2  .card {3    padding: 1rem;4  }5}

Import a file into a layer:

1@import url(“components.css”) layer(components);

Normal declaration priority:

1later layers beat earlier layers

Specificity:

1specificity matters inside the same layer

Source order:

1source order matters inside the same layer when specificity is equal

Unlayered normal styles:

1unlayered normal author styles beat layered normal author styles

Important declarations:

1!important changes the layer behaviour and should be used carefully

Quick Summary

Cascade layers let you organise CSS priority with @layer.

They add a priority level to the cascade.

For normal declarations, later layers have higher priority than earlier layers.

Layer order is considered before specificity.

That means a low-specificity selector in a higher-priority layer can beat a high-specificity selector in a lower-priority layer.

Specificity still matters inside the same layer.

Source order still matters inside the same layer when specificity is equal.

Unlayered normal styles have higher priority than layered normal styles.

A common layer order is:

1@layer reset, base, layout, components, utilities;

This keeps resets low priority, components above base styles, and utilities high priority.

Cascade layers are especially useful for organising large CSS projects, third-party CSS, utility classes, resets, and design systems.

They can reduce the need for !important.

Use them deliberately.

A clear layer structure makes CSS easier to override, easier to debug, and easier to maintain.