Tired of writing long, tedious CSS selectors?
Thankfully, :is() and :where() make things much cleaner.
Both of them let you group selectors, reducing redundancy and improving readability.
There is one key difference between the 2: specificity.
:is()inherits the highest specificity from the elements inside it. If one of its child selectors has high specificity, the whole rule does too.:where()always has zero specificity. It won’t override other styles unless there’s no conflicting rule.
The best part ? They are widely supported in all modern browsers. With over 95% support!
These selectors clean up your CSS, make maintenance easier, and help avoid specificity battles.
In practice, :where() is ideal for base styles and component resets because its zero specificity stays easy to override. Reserve :is() for situations where you still need normal cascade weight.
A good pattern is :where(article, section, aside) h2 for defaults, then targeted component classes for variations. This keeps selectors short without creating specificity debt.
:is() and :where() both reduce selector repetition, but specificity is the key difference. Use :where() for low-specificity defaults, and keep :is() for component rules where matching normal cascade weight is useful.
Use :where() for low-specificity defaults and keep :is() for grouped rules that should keep normal cascade weight. That split keeps selectors short while avoiding specificity fights later.
On form-heavy pages, this is most effective when you keep semantics native and style enhancements lightweight. That balance preserves accessibility and reduces maintenance cost.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!