Specificity

Specificity is selector weight used after origin, importance, and layer order tie. Compare as (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements).

Examples:

• `#nav .item` → (0, 1, 1, 0)
• `.btn:is(:hover, :focus)` → specificity of the most specific argument in :is
• `:where(.btn)` → zero specificity from :where

					/* Hard to override without escalation */
#sidebar .nav li a.active { color: red; }

/* Maintainable alternative */
.nav__link--active { color: red; }
				

On interviews: compute selector weight and explain why :where helps reusable utilities and why IDs force heavy overrides.

Common pitfalls: deep descendant chains couple styles to markup shape; inline styles and IDs trap later code in !important or absurd specificity.

The trade-off is defensive specificity versus theming flexibility — low specificity plus layers scales better.

Checklist:

• Avoid unnecessary IDs in component CSS.
• Use :where for zero-cost wrappers.
• Flatten descendant chains.
• Prefer classes and layers over escalation.