csstools / sanitize.css

A best-practices CSS foundation
https://csstools.github.io/sanitize.css
Creative Commons Zero v1.0 Universal
5.21k stars 314 forks source link

Pseudo-class :where()? #231

Closed qxxt closed 2 years ago

qxxt commented 2 years ago

I don't know if this is the appropriate place to ask this but why is all the elements selector using :where() pseudo-class?

robsonsobral commented 2 years ago

From MDN:

However, selectors inside :where() have specificity 0[...]

This way, it's easier to override the styles.

baticodes commented 2 years ago

@robsonsobral agree on this, but then browser support should be updated in README since it's not supported by IE

timbomckay commented 2 years ago

I'm a little curious if either are more performant. I understand it probably wouldn't have a noticeable difference but still like to know those things.

Is the main benefit that by dropping the specificity it doesn't matter where this is included in the cascade? Because now with this code

h1 { color: red; }
:where(h1) { color: blue; }

the color will remain red in the event that sanitize was loaded after other declarations? Otherwise I feel like they're already pretty easy to override as long as the cascade is structured correctly.

timbomckay commented 2 years ago

Upon further review, I see there are declarations such as :where(nav) :where(ol) to provide nested styles and can see how specificity can become a concern and using :where() just as a standard across the stylesheets.