Ever wonder what the difference between a CSS Reset and Normalize.css is?

Good. Being curious is awesome.

I’ll try to help explain the difference between the two and also provide some CSS Resets that are popular.

What are CSS Resets

A CSS Reset is exactly what it sounds like. It removes all styles from components so that they are stripped down to nothing. If you are looking to customize and utilize a bunch of different HTML components, then this is ideal for many. It basically UNSTYLES everything. There are a lot of different CSS Resets that have been created already.

There’s Eric Meyer’s “Reset CSS” 2.0, HTML5 Doctor CSS Reset, Yahoo! Reset (YUI 3) CSS, and Universal Selector * Reset. Each have their strengths, with my favorite being Eric Meyer’s.

Eric Meyer’s “Reset CSS” 2.0: You can copy it fast, it isn’t overly bloated, and it works well for my needs. Great for standard development.

HTML5 Doctor CSS Reset: This is a normal reset, but with the added benefit of HTML5 tags being included.

Yahoo! Reset (YUI 3) CSS: This is Yahoo!’s reset. You can do both global and contextual resets with it, which is very cool.

Universal Selector * Reset: Talk about simple. This resets everything with the following simple code:

*{margin:0;padding:0;}

However, that may be a bit over-the-top for some.

You can generate MINIFIED and normal versions of these CSS sheets using CSSResets.com

What is Normalize.css?

In short? It doesn’t unstyle everything.

It tries to be efficient by preserving styles that may be needed instead of just resetting everything.

For a lot of people, this is the way to go. It fixes some browser issues, supports HTML5, and attempts to make all browsers render elements in the same (visual) way.

Which do I prefer and why?

A reset might remove more styles than you are wanting, which can be inefficient. But if you are going to be designing every aspect of a website and touching a whole bunch of elements, then this is definitely the way to go!

If you’re not doing too much though, then Normalize.css is good.

Ultimately though, if I’m designing a website, I’d much rather prefer a RESET. Whenever using Normalize.css, I have to remove margins and so forth from elements still because Normalize didn’t do it.

Simply put, a Reset saves me more time. And I love my free time.

So there you have it — my “comparison” — CSS Resets versus Normalize.css