reset.css vs. normalize.css

Browsers are programmed to apply default values to elements on a web page whether or not any CSS is written. This helps render viewable HTML without any added styles. The only problem is, different browsers can’t agree on the default styles of elements and these inconsistent values then become part of your cascade.

In order to level the playing field of your cascade, you may use a set of “reset rules” to wrangle these browsers into line.  A clean baseline of styles across all browsers can save headaches later.

Eric Meyer’s reset CSS is widely used and referenced.

An alternate solution, normalize.css, is presented by necolas.

The main difference between them is that normalize.css preserves the useful defaults rather than flattening everything out and forcing you to re-declare default values you would have preferred to keep. Normalize also fixes bugs, which is outside the scope of reset.css.

Oli Studholme presents a comparison and concludes normalize.css is a better way to begin.

Me? I went with necolas as usual.

I add the normalize.css file using @import to the top of my global css file.  Strip it down as much as you like, although there isn’t a lot of bloat. Simply adding the normalize.css to the top of your global.css is fine, too. If I am using Bootstrap, there is no need since a version of normalize.css is included.

Leave a Reply

Your email address will not be published. Required fields are marked *