Skip to content
FrontendHaltFrontendHalt
CSS·Advanced·Coding·1 min read

How can :where() make component APIs easier to override?

Short interview answer

It lets a library express structural selectors with zero specificity. Consumers can then override defaults with simple selectors rather than escalating specificity or relying on !important.

Example

CSS
/* library */:where(.menu) :where(.item) { padding: 8px; }   /* specificity (0,0,0) *//* consumer — a single class is enough to win */.item { padding: 12px; }

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to Cascade, specificity, and layers

Related questions