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/sheriffderek]

When are you dropping a component into something that doesn’t have tons of global style setup? Design tokens? Global typography? Etc ? 

[u/theScottyJam → u/sheriffderek]

Well, I do make typography an exception, for better or for worse. Letting a component inherit the projects font settings when you drop it in there doesn't necessarily seem like a bad thing though.

For things like design tokens, I usually try to share relevant CSS variables between projects anyways. It's easier to make updates to shared CSS variables, since you can globally search a project for a given variable to see everywhere it gets used. It's much harder to make tweaks to a CSS reset file.

[u/sheriffderek → u/theScottyJam]

well, you can see the situation then. Where do you draw the line? I use the same baseline/reset in all my projects. I'm not sure what the other choice is --