CSS Cascade, Layers & Specificity Deep Dive
Lesson 24 • Advanced Track
What You'll Learn
💡 Think of It Like This
The cascade is like a courtroom. Multiple "witnesses" (style rules) testify about what an element should look like. The judge (browser) decides based on a strict hierarchy: importance → layer → specificity → source order. The most authoritative witness wins.
| Priority | Factor | Example |
|---|---|---|
| 1 (highest) | !important | color: red !important |
| 2 | Inline styles | style="color: red" |
| 3 | Cascade layer order | @layer base, components |
| 4 | Specificity | #id > .class > element |
| 5 (lowest) | Source order | Last rule wins (if same specificity) |
Specificity Scoring
Every CSS selector has a specificity score. Higher scores win when rules conflict.
Specificity Calculator
See which selector wins when rules conflict
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Specificity</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
h1 { color: #3b82f6; margin-bottom: 20px; }
.demo-box {
background: #1e293b;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
}
/* Specificity battles! */
/* (0, 0, 1) — element select
...CSS Cascade Layers (@layer)
@layer lets you organize your CSS into priority levels. Later layers override earlier ones, regardless of specificity within the layer.
CSS @layer in Action
Organize styles with cascade layers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS @layer</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
h1 { color: #3b82f6; margin-bottom: 20px; }
/* Define layer order — last layer has highest priority */
@layer reset, base, components, utilities;
/* Reset layer (lowest priority) */
@layer reset {
* { margin: 0
...Inheritance
Some CSS properties are inherited by child elements, others are not. Understanding this saves you from writing redundant CSS.
CSS Inheritance
See which properties inherit and which don't
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Inheritance</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
h1 { color: #3b82f6; margin-bottom: 20px; }
.parent {
color: #22c55e;
font-size: 18px;
font-family: Georgia, serif;
border: 3px solid #f97316;
padding: 20px;
background: #1e293b;
bor
...⚠️ Common Mistakes
- Over-using !important — It breaks the natural cascade and makes debugging nightmares. Only use it for utility classes in a layer-based architecture.
- ID selectors for styling — IDs have very high specificity (1,0,0). Prefer classes (0,1,0) which are easier to override.
- Not understanding source order — When two selectors have equal specificity, the last one in the stylesheet wins.
- Confusing @layer order with specificity — Layer order takes priority over specificity. A low-specificity rule in a later layer beats a high-specificity rule in an earlier layer.
🎉 Lesson Complete
You now understand exactly how the browser resolves CSS conflicts:
- ✅ Cascade order: !important → inline → layers → specificity → source order
- ✅ Specificity: IDs (1,0,0) > classes (0,1,0) > elements (0,0,1)
- ✅
@layerorganises styles with explicit priority - ✅ Text properties inherit; box properties don't
Sign up for free to track which lessons you've completed and get learning reminders.