UA+

I am a purveyor of reset styles, so of course, my ears pricked up when I spotted this. Especially as it’s a Manuel Matuzović job!

There’s lots to like in his version of a reset, such as ultra low specificity :where() selector usage, like this:

:where(html) {
  line-height: 1.5;
}

I’ve been thinking about implementing this on my own as another iteration because using :where() gives you 0 specificity which is very useful.

One of the gripes of my reset is selectors like this:

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

It’s a really handy rule, but it results in more specific selectors in the actual authored CSS. It’ll be better as:

:where(a:not([class])) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

Anyway, enough about what’s wrong with mine, let’s look more at what’s good about Manuel’s. The previews for each rule are really good. They’re such a novel and smart way of demonstrating what impact each rule in the reset is having. You can also compare other resets too!

There’s probably too much visual stuff — such as transitions for <dialog> — for my tastes, but that’s the beauty of the plethora of resets out there: you can, and should pick what you like from each and make your own!

Advert