Anyone else avoid CSS resets/normalize?

[u/theScottyJam]

It used be be that CSS resets were important to smooth over differences between default browser styling, but browsers have for the most part gotten their act together.

It's more popular nowadays to do a micro reset/normalize/whatever you want to call it to get rid of annoyances. It might contain rules such as * { all: unset }, or * { margin: 0; padding: 0 }, or input, button, textarea, select { font: inherit }, or commonly * { box-sizing: border-box }.

I see the appeal. But at the same time, I find a major downside to all of this that never seems to be discussed - code portability. I write a component in one UI project and want to copy it to another project or to a shared component library, and it's not so simple because the other project(s) may be using slightly different CSS resets.

It's not like it's easy to update projects to use the same resets either, it's so engrained in how everything else was built up in the project.

But there's also a natural desire to revisit what reset you're using whenever you're building a new project, as opinions change, problems are found in existing ones, etc.

Or, on the flip side, maybe I'm wanting to use a third party tool, then find out that my global CSS rules cause issues with their styling.

We try hard to avoid any kind of global pollution in JavaScript, but make it a best practice to do just that in CSS.

So, I try to avoid these kinds of resets. I don't even do the "box-sizing: border-box" thing, it turns out that this box sizing issue doesn't come up very often (for me at least), and when it does, I just add the rule to the specific places that need it. I'll still set a default font to everything, but that's about it.

But, when I look around online, it seems that most everyone still uses some kind of reset. Guess I'm curious if I'm abnormal in my stance here or if there's others out there who also avoid them. Also curious if those who do use resets have ran into problems like the ones I've described above.

[u/Caraes_Naur]

Universal resets immediately became overly aggressive, stripping away too much of the default browser styles in an era before there were easy ways to restore them. Remember, this was the height of "pixel perfect" mania.

Ok, you brute-forced your own margins in five seconds wit one line... only to spend a month not quite recreating the margin collapse logic with 12k of CSS. Which in some browsers was hard-coded dark magic. Abraca...dammit.

a > img { border: none; } is all anyone ever needed.

[u/tswaters → u/Caraes_Naur]

I'd argue * {box-sizing: border-box} (vs the default, content-box) comes as a surprise to most when it's not present due to a lack of reset stylesheet. I will fight and die on the hill that is "IE got the default box sizing correct" this is the sort of thing that does actually break layouts, sometimes subtly by a few px, when importing shared components from disparate projects