Write smarter CSS with :is() and :where().
Writing CSS selectors can be tedious, especially when repeating long lists of elements.
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.
Selector helpers are most valuable when they simplify real nesting and reduce repetition. Use them to flatten long chains early, so specificity remains intentional as the stylesheet grows.
Selector helpers are most helpful when they flatten deep selector chains. Use them to make intent obvious and to keep cascade maintenance manageable as stylesheets grow.
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.
When introducing smarter css with new selectors, begin with one reference component and treat it as the canonical pattern. That rollout sequence preserves clarity and reduces regressions during future refactors.
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!