A Modern CSS Reset (2024 update)

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.

> Historically, the main goal of a CSS reset has been to ensure consistency between browsers, and to undo all default styles, creating a blank slate.

I do not grok CSS and it feels complex so forgive my ignorance when I ask: isn't it possible to set every CSS property to "initial"? If so, wouldn't that in some senses be a true reset?

Or perhaps the CSS specification initial values are opinionated?

Perhaps there isn't a real definition of un-opinionated style.

I don't mean it in a bad way, just trying to observe and learn.

This pop quiz is a brilliant way to make the reader agree with the author without the author having to persuade us what "should" be the correct answer, right?

I think it should be a part of a masterclass in getting people to agree with you. Reminds me of the inception movie... if you make someone believe they came up with an idea on their own, they are more likely to agree with it and follow through. I wish I knew how to do that.

Or am I overthinking the whole thing because I chose 200px and somehow need to justify me not understanding the css specification?