# CSS Cascade Decision Tree

Use this when a CSS declaration does not do what you expected.

1. Is the selector actually matching the element?
2. Is the declaration valid, or is DevTools crossing it out?
3. Is another origin involved, such as browser default, user style or author style?
4. Is one declaration marked `!important`?
5. Are cascade layers involved?
6. Is the winning declaration unlayered while the other declaration is layered?
7. If the declarations are in comparable cascade positions, which selector has higher specificity?
8. If specificity is tied, which declaration appears later in source order?
9. Is inheritance creating the value instead of a direct rule?
10. Can the fix be made by simplifying the architecture instead of adding a stronger selector?

Good CSS debugging means finding the reason before adding the override.