If I recall correctly, the previous version of this also set * { padding: 0 } (and this is common with other resets). I’ve recently moved away from this as well. It’s less convenient, but there is a significant downside when using it with web components.
Web components have many rough edges when it comes to styling, and there’s one in particular that will hurt you if your reset includes * { padding: 0 }. The styles applied by the document to the component take precedence over the styles applied by the component to itself. So if you have a reset that zeroes out the padding for everything and then try to set the padding in your web component, it won’t take effect because zero will be inherited from outside. This is especially counterintuitive and the most direct workaround is to sprinkle !important everywhere, which is not great. These days I only reset the padding for specific element types instead of using the universal selector.
Just in general, I find that web components are especially bad for random footguns like this. So many things break once you introduce web components. I’m generally a big fan of the web as a platform and normally prefer to work as close to vanilla as possible. But web components always make me miserable and frustrated. They really need to be torn down and replaced with something better.
You could say that a lot about how web components work. If you want to see some of the mess in sorting the spec. out, check out the discussions in the csswg-drafts repo, for instance:
Web components have many rough edges when it comes to styling, and there’s one in particular that will hurt you if your reset includes * { padding: 0 }. The styles applied by the document to the component take precedence over the styles applied by the component to itself. So if you have a reset that zeroes out the padding for everything and then try to set the padding in your web component, it won’t take effect because zero will be inherited from outside. This is especially counterintuitive and the most direct workaround is to sprinkle !important everywhere, which is not great. These days I only reset the padding for specific element types instead of using the universal selector.
Just in general, I find that web components are especially bad for random footguns like this. So many things break once you introduce web components. I’m generally a big fan of the web as a platform and normally prefer to work as close to vanilla as possible. But web components always make me miserable and frustrated. They really need to be torn down and replaced with something better.