all: initial vs. using CSS resets

Question

I know there are many so-called "css resets", e.g.

• https://ageek.dev/normalize-css,
• https://meyerweb.com/eric/tools/css/reset/, or
• https://elad2412.github.io/the-new-css-reset/

But what I don't understand is why it seems it is not possible to use something way more simpler.

As far as I know, the initial keyword resets a property to the value that is defined as the default value of that property in the CSS specification.

And since nowadays we have the all property-like keyword, I expected that I can use something like

* {
  all: initial;
}

or

:root {
  all: initial;
}

instead of all these reset.csss and normalize.csss. That is, I expected that one of these short snipets will help me to remove styles added to a web page from user agent stylesheet.

But it doesn't really work as I expected it. It seems that

:root, html, body {
  all: initial
}

doesn't really remove styles "inherited" from user agent stylesheet at all, and

* {
  all: initial
}

removes styles too aggressively. For example, it makes my style and script elements visible! I don't think that CSS specification says that these two elements should be visible. I'm sure that CSS specification says that they should be not visible. That is, it seems that

* {
  all: initial
}

instead of resetting my styles to the CSS specification-level, resets them to the absolute-zero-level. This is not what I want.

---

Can anybody explain what is wrong in my understanding?

Answer 1

You are correct that initial resets to initial values for a given CSS property, but note that CSS properties have no initial value for each element-- they only have an initial value for that property, which will be the same for any and all elements it is applied to. For instance, the color property spec has a single initial value defined-- not a list of initial values to which it should be set for every element. So when you use it in conjunction with all, using:

* {
  all: initial
}

...you are telling the browser to take every property of every single element and reset it to the property's default value. So, for instance, the display property spec defines its initial value as inline-- so every single element on your page will be displayed as inline.