CSS · Advanced CSS

Cascade Layers

Control CSS specificity with @layer

Find videos you like?

Save to resource drawer for future reference!

CSS Cascade Layers

NEW 2022

Control specificity without !important

@layer = Specificity Control! 🎯

Cascade layers let you organize CSS into explicit layers with predictable priority. Layer order matters more than specificity! No more !important wars! Perfect for managing framework CSS, components, and utilities.

The Problem Cascade Layers Solve

❌ Before

• Specificity wars
• !important everywhere
• Framework vs custom styles conflicts
• Hard to maintain

✅ With Layers

• Clear layer order
• No !important needed
• Framework isolation
• Easy to override

Creating Layers

Three ways to define layers

1. Declare Layer Order

Define all layers upfront (recommended)

@layer reset, base, components, utilities;

2. Create with Rules

Create layer and add rules

@layer components {
  .button { }
}

3. Import into Layer

Import external CSS into layer

@import url("reset.css") layer(reset);

Layer Priority

How layers cascade

📚 Cascade Priority Stack (High to Low)

🔥1. Unlayered Styles (HIGHEST PRIORITY)

Normal CSS outside layers

2. Last Layer (utilities)

Later layers override earlier ones

3. Middle Layers (components)

Declared in order

📦4. First Layer (reset) - LOWEST

Foundation layer

Priority flows upward ⬆️

Key Insight!

Layer order beats specificity! A later layer's .class overrides an earlier layer's #id.

Practical Example

Organize a design system

Cascade Layers Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="card">
      <h1 class="title text-center">CSS Cascade Layers</h1>
      <p class="text-center mb-4">
        This page uses @layer to organize CSS into logical groups:
      </p>
      <div class="mb-4">
        <strong>Layer Order:</strong>
        <ol style="margin-left: 20px; margin-top: 10px;">
          <li>reset (lowest priority)</li>
          <li>base</li>
          <li>components</li>
          <li>utilities (highest priority)</li>
        </ol>
      </div>
      <div class="text-center mt-4">
        <button class="button">Regular Button</button>
        <button class="button special-override" style="margin-left: 10px;">
          Override Button
        </button>
      </div>
      <p class="text-center mt-4" style="font-size: 14px; color: #6b7280;">
        The utilities layer can override component styles without !important!
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Best Practices

How to organize layers

Recommended Layer Structure

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

/* Reset: Browser resets */
/* Base: Typography, defaults */
/* Theme: Colors, variables */
/* Layout: Grid, container */
/* Components: UI components */
/* Utilities: Helper classes */

Declare order first:Define all layers at the top of your CSS

Framework isolation:Put third-party CSS in early layers

Utilities last:Helper classes should override everything

Keep it simple:Too many layers = complexity

Remember

Layer order beats specificity - Later layers win!

Declare layer order first: @layer a, b, c;

Unlayered styles always win over layered ones

Browser support: Chrome 99+, Safari 15.4+, Firefox 97+

Previous Topic

CSS Nesting

Native CSS nesting with &, nesting selectors, and organizing stylesheets.

Next Topic

CSS Scoping

@scope rules, scoping styles to subtrees, and component-level styling.

Ask a Question

Have a question about Cascade Layers? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Advanced CSS

Cascade Layers

Control CSS specificity with @layer

Find videos you like?

Save to resource drawer for future reference!

CSS Cascade Layers

NEW 2022

Control specificity without !important

@layer = Specificity Control! 🎯

The Problem Cascade Layers Solve

❌ Before

• Specificity wars
• !important everywhere
• Framework vs custom styles conflicts
• Hard to maintain

✅ With Layers

• Clear layer order
• No !important needed
• Framework isolation
• Easy to override

Creating Layers

Three ways to define layers

1. Declare Layer Order

Define all layers upfront (recommended)

@layer reset, base, components, utilities;

2. Create with Rules

Create layer and add rules

@layer components {
  .button { }
}

3. Import into Layer

Import external CSS into layer

@import url("reset.css") layer(reset);

Layer Priority

How layers cascade

📚 Cascade Priority Stack (High to Low)

🔥1. Unlayered Styles (HIGHEST PRIORITY)

Normal CSS outside layers

2. Last Layer (utilities)

Later layers override earlier ones

3. Middle Layers (components)

Declared in order

📦4. First Layer (reset) - LOWEST

Foundation layer

Priority flows upward ⬆️

Key Insight!

Layer order beats specificity! A later layer's .class overrides an earlier layer's #id.

Practical Example

Organize a design system

Cascade Layers Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="card">
      <h1 class="title text-center">CSS Cascade Layers</h1>
      <p class="text-center mb-4">
        This page uses @layer to organize CSS into logical groups:
      </p>
      <div class="mb-4">
        <strong>Layer Order:</strong>
        <ol style="margin-left: 20px; margin-top: 10px;">
          <li>reset (lowest priority)</li>
          <li>base</li>
          <li>components</li>
          <li>utilities (highest priority)</li>
        </ol>
      </div>
      <div class="text-center mt-4">
        <button class="button">Regular Button</button>
        <button class="button special-override" style="margin-left: 10px;">
          Override Button
        </button>
      </div>
      <p class="text-center mt-4" style="font-size: 14px; color: #6b7280;">
        The utilities layer can override component styles without !important!
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Best Practices

How to organize layers

Recommended Layer Structure

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

/* Reset: Browser resets */
/* Base: Typography, defaults */
/* Theme: Colors, variables */
/* Layout: Grid, container */
/* Components: UI components */
/* Utilities: Helper classes */

Declare order first:Define all layers at the top of your CSS

Framework isolation:Put third-party CSS in early layers

Utilities last:Helper classes should override everything

Keep it simple:Too many layers = complexity

Remember

Layer order beats specificity - Later layers win!

Declare layer order first: @layer a, b, c;

Unlayered styles always win over layered ones

Browser support: Chrome 99+, Safari 15.4+, Firefox 97+

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

CSS Nesting

CSS Scoping

Building Your Learning Module...

Cascade Layers

@layer = Specificity Control! 🎯

The Problem Cascade Layers Solve

❌ Before

✅ With Layers

1. Declare Layer Order

2. Create with Rules

3. Import into Layer

📚 Cascade Priority Stack (High to Low)

Key Insight!

Cascade Layers Demo

Recommended Layer Structure

Remember

CSS Nesting

CSS Scoping

Cascade Layers

@layer = Specificity Control! 🎯

The Problem Cascade Layers Solve

❌ Before

✅ With Layers

1. Declare Layer Order

2. Create with Rules

3. Import into Layer

📚 Cascade Priority Stack (High to Low)

Key Insight!

Cascade Layers Demo

Recommended Layer Structure

Remember