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

Every time I think I want this, I inevitably have to test my sites on multiple browsers and remember why I want a normalize.

[u/Due-Working4505 → u/mq2thez]

It's less about browsers being identical these days and more about not trusting them to stay consistent. One update and suddenly your form elements look wonky on a specific version of Safari, and you're hunting down a bug that a reset would've prevented.

I get the portability angle though. Had a similar headache moving a datepicker between two internal tools with different global resets. Now I just wrap my components in a container and scope the reset to that, keeps the damage contained.

[u/Bubbly_Orange_3502 → u/mq2thez]

Form controls are the live example. Safari still paints select and the date inputs with platform chrome that ignores your padding until appearance: none, and none of the four inherit font by default anywhere.

[u/Alternative_Web7202 → u/Bubbly_Orange_3502]

yes, but those definitely doesn't require something like this * { all: unset }, or * { margin: 0; padding: 0 }

in fact, I'm not sure * selectors are required these days for anything like a regular website.

[u/theScottyJam → u/mq2thez]

What is an example of a browser difference that you've ran into, that your reset file fixed?

Edit: Surprised at the downvotes - I'm generally curious, not trying to challenge or anything. One of my initial claims was that there's few browser differences now, if people want to bring in evidence to the contrary, I'm interested to learn about it.

[u/lanerdofchristian → u/theScottyJam]

TailwindCSS's preflight.css has a lot of comments explaining why each rule is there.

[u/mq2thez → u/theScottyJam]

Historically I remember the most issues with form field consistency.

[u/XWasTheProblem]

Every single time I try to avoid it, I end up coming across some weird-ass annoying issue that inevitably gets solved by changing/resetting some default browser styling.

May as well just purge everything and be done with it.

[u/JimDabell]

Fun fact: If you use web components, you need to inject your reset into the shadow DOM in every single instance of every single web component explicitly.

[u/theScottyJam → u/[deleted]]

and you end up rebuilding accessibility defaults by hand.

Curious what kind of accessibility stuff gets lost.

Because, while I don't do all: unset globally, I do use it on specific elements, such as if I want to make a button look like a link.

I always do outline: revert with it to restore outlines when browsing with tab, but now I'm worried that may not be enough.

[u/theScottyJam → u/[deleted]]

I've never actually tried the forced color emulation before, just tried it out now.

And yes, the display inline thing does bite me sometimes.

Thanks for the insights!

[u/webdev-ModTeam → u/[deleted]]

Your post/comment has been determined to be a low-effort post or comment. This includes title-only posts, easily searchable questions, vague/open-ended discussion prompts, LLM generated posts or comments, and posts/comments that do not provide enough context for meaningful replies or discussion.

[u/webdev-ModTeam → u/[deleted]]

Your post/comment has been determined to be a low-effort post or comment. This includes title-only posts, easily searchable questions, vague/open-ended discussion prompts, LLM generated posts or comments, and posts/comments that do not provide enough context for meaningful replies or discussion.

[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 --

[u/Schlickeysen]

You have a good point.

[u/k-rizza]

Portability doesn’t exist and never will. Best you can have is a high degree of it. Browser having sensible defaults would help a lot. It’s been like 50 years lol they still have those outdated styles.

[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

[u/mka_ → u/[deleted]]

Cheers Gemini

[u/webdev-ModTeam → u/[deleted]]

Your post/comment has been determined to be a low-effort post or comment. This includes title-only posts, easily searchable questions, vague/open-ended discussion prompts, LLM generated posts or comments, and posts/comments that do not provide enough context for meaningful replies or discussion.

[u/tswaters]

I'd have to double check the default stylesheets, as it's been a while, but I highly doubt all of these things are the same between every major browser: font-size, line height, margin/padding of block level elements, and box-sizing model.

I'm not sure, but I think you're likely to get inconsistencies with the default font-family , I would guess safari uses some apple-specific os font if it can. In general I'm not sure it would really matter for simple stuff, it's only when you need to create complicated UIs with limited real estate that inconsistency between devices can cause layouts to fail.

I haven't tested this in a while mind you, maybe in today's world the default stylesheets are more or less consistent & promote mobile-first readability. Like, back in the day, default font-size/line-height was like 12px/1.1 or something stupid, for desktops on 640x480... We've come a long way!

[u/draftvader]

Inject the site name into the body class.

[u/SelfSufficient21]

Or as my boss would say "Who writes or cares about this in AI age? Is there anyone that writes this manually?"

[u/theScottyJam → u/SelfSufficient21]

...me.

I do use AI a decent amount, but it does struggle more at visual stuff. Especially when you need to get some trickier CSS stuff done. There's things I can do that it's not yet skilled enough to do. But I do offload stuff to it that it can do fairly well.