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:
My understanding of "CSS Reset" mirrors the statement in the post:
> 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.
> Pop quiz! Measuring by the visible pink border, how wide is the .box element in the following scenario, assuming no other CSS has been applied?
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?
For what it's worth, as a primarily backend dev having ~recently started getting more deeply into frontend web, I have specifically noted in my head that the box model isn't too intuitive and in my inexperienced opinion, the default was a bad one. I figured surely if it is the way it is, then it's for reasons I do not yet comprehend™, so it actually feels pretty validating that someone who knows what they're talking about agrees.
I get your point about `-webkit-font-smoothing: antialiased;`. While I'm not fully versed in its effects, I agree that we should avoid vendor prefixes to keep things consistent. Thanks for highlighting this!
> 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. My CSS reset doesn't really do either of these things.
> These days, browsers don't have massive discrepancies when it comes to layout or spacing. By and large, browsers implement the CSS specification faithfully, and things behave as you'd expect. So it isn't as necessary anymore.
> I also don't believe it's necessary to strip away all of the browser defaults. I probably do want <em> tags to set font-style: italic, for example! I can always make different design decisions in the individual project styles, but I see no point in stripping away common-sense defaults.
> My CSS reset may not fit the classical definition of a “CSS reset”, but I'm taking that creative liberty.
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.
Why is that the behavior? It seems obviously wrong to me.
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:
https://github.com/w3c/csswg-drafts/issues/1915
https://github.com/w3c/csswg-drafts/issues/6466
https://github.com/w3c/csswg-drafts/issues/10094
My understanding of "CSS Reset" mirrors the statement in the post:
> 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.
> Pop quiz! Measuring by the visible pink border, how wide is the .box element in the following scenario, assuming no other CSS has been applied?
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?
For what it's worth, as a primarily backend dev having ~recently started getting more deeply into frontend web, I have specifically noted in my head that the box model isn't too intuitive and in my inexperienced opinion, the default was a bad one. I figured surely if it is the way it is, then it's for reasons I do not yet comprehend™, so it actually feels pretty validating that someone who knows what they're talking about agrees.
Not this again... -webkit-font-smoothing: antialiased; It makes typography inconsistent between desktop, web and your web
I get your point about `-webkit-font-smoothing: antialiased;`. While I'm not fully versed in its effects, I agree that we should avoid vendor prefixes to keep things consistent. Thanks for highlighting this!
> October 2024 — I added #8, improved line wrapping with text-wrap.
That's not a CSS reset in any sense, just the author's dubious preferences.
They are pretty clear about this:
> A pedantic note
> 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. My CSS reset doesn't really do either of these things.
> These days, browsers don't have massive discrepancies when it comes to layout or spacing. By and large, browsers implement the CSS specification faithfully, and things behave as you'd expect. So it isn't as necessary anymore.
> I also don't believe it's necessary to strip away all of the browser defaults. I probably do want <em> tags to set font-style: italic, for example! I can always make different design decisions in the individual project styles, but I see no point in stripping away common-sense defaults.
> My CSS reset may not fit the classical definition of a “CSS reset”, but I'm taking that creative liberty.
Cool!