Cascade

The cascade chooses one winning declaration when many rules target the same property. Resolution order matters: origin and importance first, then cascade layer, then specificity, then scoping proximity, then source order.

| Step | What wins | |------|-----------| | 1 | Origin (user agent < author < user) | | 2 | Importance (`!important` flips within origin) | | 3 | Cascade layer (@layer order) | | 4 | Specificity | | 5 | Source order (later wins) |

					@layer reset, components, utilities;

@layer components {
  .card { padding: 1rem; }
}
@layer utilities {
  .p-0 { padding: 0 !important; } /* layer + important beats normal component rule */
}
				

On interviews: explain why a style is not applying by walking the cascade steps — not by adding more selectors.

Common pitfalls: escalating specificity hides ownership problems; `!important` as the default escape hatch; unlayered styles outranking layered normal rules during migrations.

The trade-off is quick fixes versus predictable architecture — layers and local ownership reduce conflict better than heavier selectors.

Checklist:

• Check origin and importance first.
• Compare layer order before specificity.
• Prefer lower-conflict architecture over override wars.
• Document where utilities may use !important.