Quiz: Cascade Resolution

Trace the Full Cascade Algorithm

Each question presents conflicting CSS rules. Your job: determine which declaration wins by tracing the cascade algorithm — origin, layers, specificity, source order. These are the edge cases that separate CSS experts from CSS users.

If you can get 6+ out of 8, you understand the cascade at an architectural level.

---

Question 1: Layer vs Specificity

@layer base, utilities;

@layer base {
  #main .hero h1.title {
    color: navy;
  }
}

@layer utilities {
  .text-red {
    color: red;
  }
}

The element has id="main", classes hero, title, and text-red.

---

Question 2: !important in Layers (Inversion)

@layer reset, components;

@layer reset {
  a { color: blue !important; }
}

@layer components {
  .link { color: red !important; }
}

The element is <a class="link">.

---

Question 3: Unlayered vs Layered

@layer components;

@layer components {
  .btn {
    background: blue;
    color: white;
  }
}

.btn {
  background: green;
}

---

Question 4: Inheritance vs Cascade

.parent {
  color: red;
}

.child {
  color: inherit;
}

.parent .child {
  color: blue;
}

---

Question 5: :where() and Source Order

:where(#sidebar) .widget {
  padding: 1rem;
  background: white;
}

.widget {
  padding: 2rem;
  background: gray;
}

---

Question 6: Inline Style vs !important

<div class="box" style="color: red;">

.box { color: blue !important; }

---

Question 7: Animation vs Cascade

.box {
  color: red;
  animation: colorize 2s forwards;
}

@keyframes colorize {
  to { color: blue; }
}

.box { color: green; }

During the animation, what color is the text?

---

Question 8: Nested Layers

@layer framework {
  @layer base, components;
}

@layer app;

@layer framework.components {
  .card { border: 2px solid blue; }
}

@layer app {
  .card { border: 1px solid gray; }
}

@layer framework.base {
  .card { border: 3px solid red; }
}

---

Scoring Guide