Normalize vs. Reset.css

17 Jun 2016

It took me entirely too long to realise that normalize.css existed. Now that I do know what all the fuss is about, I’m going to tell you why you should use it too.

Tl;dr

  1. Reset.css = reset base style to absolute zero
  2. Normalize.css = set base style to something sensible and consistent

Whats wrong with reset.css?

When I started making websites, I knew that browsers had their own default styling and so differing visitors might see a different site depending on their web browser. To combat this, I read that it was a good idea to use something that could negate all these arbitrary differences.

Fire up google, first stop reset.css. Job done?

Not exactly…

While reset.css does exactly what it sets out to – set your CSS styles to absolute ground zero - the reality of making a site on top of reset.css is that not even strong or em tags will have any styling unless you explicitly declare it.

That makes working with reset.css rather annoying.

If I went to the trouble of putting in strong tags, I definitely want that thing to be highlighted. If I make a numbered list then I definitely want it to be numbered and if I make a heading, I want it to stand out over my text. You get the idea…

As a result, what you’ll likely end up doing is creating an un-reset.css file to cancel out the irritations of the reset.css file. This is slightly absurd.

Enter normalize.css.

Normalize vs Reset CSS

What about normalize.css then?

I’ve already mentioned how normalize.css sets the styling to a sensible default while lambasting reset.css, but there’s more to it than that.

You actually get the freedom to decide what sensible means.

If you take a glance through the documentation for normalize.css, not only will you get an idea for what the cross browser differences are, but you’ll also note that some of the adjustments are commented as opinionated (i.e. optional).

So you can choose what to keep and what not to.

The verdict seems pretty clear - in most situations, normalize.css should be your default choice.