Frontend Errors Cascade Conflicts

This skill diagnoses and fixes cascade conflicts in CSS : "why is my rule not winning". It assumes familiarity with @layer and @scope syntax (covered by [[frontend-syntax-css-cascade-layers-scope]]) and focuses on the decision tree, the inversions that surprise authors, and the DevTools workflow.

Sources : MDN: Specificity (verified 2026-05-19), MDN: Cascade (verified 2026-05-19), MDN: !important (verified 2026-05-19), MDN: @layer (verified 2026-05-19).

Quick Reference

Cascade sort order (FULL chain)

Apply these in order; the first DIFFERENCE decides the winner :

1. Relevance. Filter to rules whose selector matches AND whose media context matches.
2. Origin + Importance. See the 8-step ladder below.
3. Layers. Layer order within the same origin + importance.
4. Specificity. Higher wins.
5. Scoping Proximity. For @scope rules, the closest scope root wins.
6. Order of Appearance. Later declaration wins.