The Cascade &
Specificity

1. The Cascade Layers

The "C" in CSS stands for Cascade. It's the algorithm that solves conflicts. Modern CSS introduces @layer to give you total control.

/* The Old Way: Fighting with !important */
.card { color: red !important; }

/* The Modern PhD Way: Cascade Layers */
@layer base, themes, utilities;

@layer base {
  .card { color: blue; }
}

@layer utilities {
  .text-red { color: red; } /* Wins because 'utilities' is last */
}

2. Specificity Wars

Every selector has a weight. It's a tuple: (ID, Class, Element).

• #header 1, 0, 0
• .nav .item 0, 2, 0
• :where(#header) 0, 0, 0 (The Phantom ID)

Pro Tip: Use :where() to reduce specificity to zero, allowing easy overrides later.

3. Native Nesting

Gone are the days of Sass/SCSS. You can now nest directly in CSS.

/* The Modern Way */
.card {
  background: white;
  
  /* Nesting with & */
  & .title {
    color: black;
  }
}