Simplify your CSS code
Published onCSS has been evolving faster and faster, and one of the most remarkable highlights is the new :is()
and :where()
selectors.
Compatible with modern browsers, these selectors significantly simplify CSS code, especially when dealing with complex or repetitive selectors. Both accept a list of selectors, targeting elements that match any listed selector.
Traditional vs Modern selector approaches
Consider this traditional CSS code:
And its Sass Preprocessor equivalent:
Both compile to:
Now, using :is()
and :where()
:
This streamlined approach enhances readability and efficiency.
Differences between the selectors
:is()
: Simplifies nested selectors, similar to CSS preprocessors like Sass. However, it treats specificity differently. The specificity is the highest among the provided selectors.:where()
: Unique in its zero specificity, this selector won't interfere with other CSS specificity rules, making it ideal for styling without specificity conflicts.
Why use these selectors?
- Simplification: Reduces the length and complexity of CSS selectors.
- Specificity Management:
:where()
offers a zero-specificity approach, a first in CSS. - Library Integration: These selectors pave the way for CSS libraries with no specificity conflicts.
Incorporating these selectors into your CSS promises more readable, simpler, and conflict-free styling.