28th June 2012

What’s your Style? Normalize.css or Reset.css

Scroll down

Normalize-css

Many website developers tend to use a template stylesheet before building a website, just to get all the elements into a state they can quickly identify and work with. Which stylesheet they use will usually depend on the project, the designer or the company they are working for. Many developers will have their own template stylesheets, but two of the most popular are Eric Mayer’s Reset.css and Nicolas Gallagher & Jonathan Neal’s Normalize.css found on Github.

Eric Mayer’s Reset.css stylesheet has been popular for a long time; for those that don’t know what it does, the Reset.css essentially removes all built-in browser styling. This means that all elements, such as h1-h6, strong, em, a, etc., all end up looking exactly the same, with no decoration at all, as well as all the padding and margin being set to 0 for everything. The idea is that you can then style each element either as you go, or for the project at hand.

A normalized stylesheet on the other hand, aims to neutralise inconsistencies between browsers, so each element will still have the expected styling applied to it, however the styling will be more consistent across all browsers.

So, what are the advantages to each, why do some people use one and other people use another. Simple, it’s all about preference. That’s the real advantage of a reset stylesheet is that you start with a completely fresh canvas, you then style each element the way you want it, so you know exactly what each element is going to look like. The disadvantage of this stylesheet is that it usually becomes extremely large; after all you are taking each styling away, then re-adding them all back in.

This is one reason why the normalized stylesheet has started to grow in popularity, because all it is doing is changing the inconsistencies. The advantage of Normalize.css is that it preserves a lot of useful defaults; so h1’s are bigger than h2’s, strong text is bolder than normal text, etc. Another big advantage of Normalize.css, is that it fixes some bugs that Reset.css doesn’t have the scope for. These include many HTML5 element display settings, the lack of font inheritance by form elements, correcting font-size for pre, and the button styling bug in iOS.

On a personal note, I have only just started learning HTML and CSS properly since moving to work here at Creode, I know a lot of the basics, those that are essential to my job, but I have never built a website from scratch, so have only just come across these two template stylesheets. Personally, I am leaning towards Normalize.css stylesheet, especially after carrying out the research for this article. The reasons for this are that I don’t think I have the patience or knowhow to build each elements’ styling from the ground up.

Here at Creode the development guys use HTML5 Boilerplate and Susy as a starting point for the websites we build.

So, what’s your style? Reset.css or Normalize.css. Or do you go for something completely different?