What is the difference between Normalize.css and Reset CSS?

css normalize-css
Jitendra Vyas picture Jitendra Vyas · Jul 31, 2011 · Viewed 215.3k times · Source

I know what CSS Reset is, but recently I heard about this new thing called Normalize.css

What is the difference between Normalize.css and Reset CSS?

What is the difference between normalizing CSS and resetting CSS?

Is it just a new buzz word for the CSS Reset?

Answer

necolas picture necolas · Dec 2, 2011

I work on normalize.css.

The main differences are:

  1. Normalize.css preserves useful defaults rather than "unstyling" everything. For example, elements like sup or sub "just work" after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text after including reset.css. So, normalize.css does not impose a visual starting point (homogeny) upon you. This may not be to everyone's taste. The best thing to do is experiment with both and see which gels with your preferences.

  2. Normalize.css corrects some common bugs that are out of scope for reset.css. It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of font inheritance by form elements, correcting font-size rendering for pre, SVG overflow in IE9, and the button styling bug in iOS.

  3. Normalize.css doesn't clutter your dev tools. A common irritation when using reset.css is the large inheritance chain that is displayed in browser CSS debugging tools. This is not such an issue with normalize.css because of the targeted stylings.

  4. Normalize.css is more modular. The project is broken down into relatively independent sections, making it easy for you to potentially remove sections (like the form normalizations) if you know they will never be needed by your website.

  5. Normalize.css has better documentation. The normalize.css code is documented inline as well as more comprehensively in the GitHub Wiki. This means you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests. The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.

I've written in greater detail about this in an article about normalize.css

Related questions

"font-family: monospace, monospace"

I'm just curious, in normalize.css, the monospace font rules contain font-family: monospace, monospace; Is there a difference to font-family: monospace; ? There must be a reason for using that. Maybe it's a workaround for the behaviour of some browsers?

Read More
Angular 2: How to correctly automatically import normalize.css

I am a new Angular 2 user, and I have some problems with it. Traditionally, we could use <link rel="stylesheet" href="node_modules/normalize.css/normalize.css" /> to import a css file, but I want to make Angular 2 …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More