📌 What Are Cascade Layers?

CSS cascade layers (using @layer) allow you to control how different groups of styles are prioritized in the cascade —before specificity or source order are considered. This gives developers a powerful way to structure CSS clearly and prevent style conflicts. 🎯

🎯 Why Do We Need Cascade Layers?

They help solve common CSS problems:

🧩 Basic Syntax

@layer components {
  .btn {
    padding: 10px;
    background: blue;
  }
}

This creates a layer named components and styles inside it are grouped together in the cascade.

📚 Layer Priority

Layers are evaluated in the order they are declared. Earlier layers = lower priority. Later layers = higher priority.

@layer reset, base, components, utilities;

This declaration sets the order once — even if the actual layers are defined later.

⚔️ How Layers Affect the Cascade

Layers come before specificity and source order in the cascade. That means even a low-specificity rule in a higher layer can override a more specific rule in a lower layer! 🤯

@layer base {
  p {
    color: blue;     /* Low layer */
  }
}

@layer theme {
  p {
    color: red;      /* High layer */
  }
}

👉 Final color: red (theme layer wins)

🧱 Creating Multiple Layers

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer components {
  .card { border: 1px solid #ccc; }
}

@layer utilities {
  .text-center { text-align: center; }
}

💡 Importing Layers

You can import files into layers:

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

🎨 Layering Framework CSS

Many libraries (Bootstrap, Tailwind, etc.) may conflict with your custom styles. Using layers gives you full control.

@layer framework {
  @import url("bootstrap.css");
}

@layer custom {
  button {
    background: purple;
  }
}

Even if Bootstrap uses stronger selectors, your custom layer wins because it’s higher priority.

🧠 Layers + Specificity Example

@layer low {
  #title {
    color: blue;
  }
}

@layer high {
  h1 {
    color: red;
  }
}

❗ Even though #title is more specific,h1 wins because it's in a higher layer.

🛠️ Best Practices

📌 Real-World Layer Structure

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

/* reset */
@layer reset {
  *, *::before, *::after {
    margin: 0;
    padding: 0;
  }
}

/* base */
@layer base {
  body {
    font-family: sans-serif;
  }
}

/* theme */
@layer theme {
  :root {
    --color-primary: #4f46e5;
  }
}

/* components */
@layer components {
  .btn {
    padding: 8px 16px;
  }
}

/* utilities */
@layer utilities {
  .text-center { text-align: center; }
}

🔗 Helpful Resources