The better-known normalize.css is https://github.com/necolas/normalize.css. It was last touched seven years ago.

There’s a reason neither has seen more recent activity: they were mostly about making old browsers behave themselves, and they’re done. The stylesheets did have a little more to them, but it wasn’t what people actually cared about… and in some cases they were better off without them. I know I disagree with quite a few of their opinionated styles.

Those old browsers are now long obsolete—half of them can’t even talk TLS 1.2, which basically excludes them from the modern web—so almost all of these stylesheets is obsolete, and you don’t need them.

For the few pieces that might still have value, you would now prefer to use @layer or :where() for this kind of stylesheet, to make them behave more like user agent styles and avoid specificity conflicts.

There may be some rules you want to change in a set of baseline rules such as margin/padding, image sizing, and fonts. But those would be things you would add on top of normalize.css anyway.

[1] https://html.spec.whatwg.org/multipage/rendering.html#render...

Instead, we'd just set elements to what we wanted them to be which is what we'd have to do in most cases anyway, making any reset unnecessary.

- CSS reset - completely reset all browser styles to be blank essentially, across different browsers, so then you'll build your styling on common ground

- CSS normalize - same idea of resetting to a baseline, but keeping some of the default styling but still make it consistent across browsers, so not stripping away everything

No, a browser's defaults are, well, its defaults. One doesn't reset to them.

I think the line between a normalizer and reset stylesheet is _very_ fine, if there even is a line. A normalizer is probably _slightly_ more opinionated than a reset stylesheet. In the end, the difference isn't really important. If you need a reset stylesheet, normalizer will probably do just as well.

[1]: https://github.com/tailwindlabs/tailwindcss/blob/main/packag...

    /*
      1. Add the correct height in Firefox.
      2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
      3. Reset the default border style to a 1px solid border.
    */
    
    hr {
      height: 0; /* 1 */
      color: inherit; /* 2 */
      border-top-width: 1px; /* 3 */
    }

I am an amateur dev (I write open-source useful for me and possibly others) and I am prone to the "front-end diarrhea syndrome", where when I see something cooler, I jump on it and regret afterwards the time spent.

I am on TailwindCSS right now and I am afraid to learn the drawbacks, but one must be courageous in life.

This is a pretty good post.

In general, I don't think `class` is a good place for styling.

Perhaps connectivity became so good that now as long as it works on evergreen, it’s good to go. We used to put a lot of effort into this stuff, but it feels like it’s been years since we even thought about it.

Brief history/explanation from: https://github.com/csstools/normalize.css/#differences-from-...

> Nicolas Gallagher and I started writing normalize.css together. I named and created the normalize.css repository with the help of Paul Irish and Ben Alman. I transferred the repository to Nicolas, who turned it into a “household” CSS library.

> Later, I resumed authorship of normalize.css with Luciano Battagliero. Together, we tagged, deprecated, and removed “opinionated” styles — styles developers often prefer but which do not fix bugs or “normalize” browser differences.

> Later, Nicolas resumed authorship and the issue of whether to include or omit the opinionated styles forced us to split.

Used here: https://github.com/Leftium/news/blob/0d507aecd05dfe94853d278...

https://www.joshwcomeau.com/css/custom-css-reset/

Here’s mine[1] which I wrote while working on multilingual projects involving both Latin and non-Latin languages.

[1] https://github.com/Microflash/preset/blob/main/src/preset.cs...

More details here: https://getbootstrap.com/docs/5.3/content/reboot/

Code: https://github.com/twbs/bootstrap/blob/v5.3.8/dist/css/boots...

    * {
        all: unset;
    }

I agree, it would be nice to get a bit of a cleaned up set of defaults though, and you could polyfill it this way.

My take on Normalize.css is how something so simple can have such a huge impact. It's astonishing.