Cascade and Specificity

When several declarations target the same property, the cascade resolves the conflict. Understanding that decision removes the need for selector escalation and repeated !important.

How a winner is chosen

The browser considers relevance, origin and importance, cascade layer, specificity, scoping proximity, then source order. For ordinary author styles in one layer, specificity and source order are what you see most often.

01.notice { color: #4c1c62; }
02main .notice { color: #211a25; }
03.notice { color: #f46537; }

The descendant selector is more specific, so its color wins. If specificity ties, the later declaration wins.

Keep specificity low

01@layer reset, base, components, utilities;
02
03@layer base {
04  a { color: rebeccapurple; }
05}
06
07@layer components {
08  .button { color: white; background: #4c1c62; }
09}

Layers define a deliberate priority before specificity is compared. Low-specificity selectors such as :where(.card h2) are easy to override.

Inheritance

Some properties, including color and font-family, inherit from a parent. Box properties such as margin and border generally do not.

01body { color: #211a25; font-family: system-ui; }
02button { font: inherit; }

Keep this

Design a low-specificity cascade, use layers for large systems, and let inheritance carry shared text styles.