A Brief About CSS Reset and Normalize

With the help of CSS reset or normalize we can give an essential start point for our projects. Following this technique, our CSS development could be a lot easier.

Although I use(d) reset or normalize in every project, I wasn’t sure about the exact difference between these – and what they precisely do. Of course, I knew the purpose of the tools but knowing more about it is not that much time and utterly worth it.

So why these tools exist? Let’s find out!

CSS Reset

If you remember the old ages of CSS – the time when the web standards weren’t too strong – I’m sure you know Eric Meyer’s reset. Eric’s code is a classical reset so it will set all of the selected item’s properties a primary value which is sometimes useful and sometimes dangerous. It’s true that this was helpful and spared from the headaches, but there were some drawbacks. The reset removed the valuable parts too – like the headings or sup/sub formatting.

I think today this method is outdated – because there are better ones – but a way back it was a brilliant solution. Now the browsers have fewer quirks, and the hard reset is unnecessary.

Let’s check out the core from the “Meyer Reset”:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

In the previous code, there are a bunch of selectors where we define a new “default” value for some of its properties what then we can build on. Giving the same font-size for all of our elements – like the headings – not the best – but of course, we can set a scale later – but remove the body’s default margin is practical.

normalize.css

The normalize.css is Nicolas Gallagher’s project, and it is an entirely different approach. Normalize is don’t try to make you a clear code, its goal is to create a right and consistent starting point which achieve less code after all. This means you get a scaled headings structure, corrected line-heights and solving some cross-browser problem.

If you used Bootstrap you used normalize too, it is built into its core.

The difference is the point of view; the first ones clear every element while the second one tries to make them similar in all browser in a better way from a developer perspective. In my opinion, normalize.css is something which more usable in a modern environment than the CSS reset, but I use it almost everytime, so it is not so surprising.

One of the best features of this lines is it documented well; if you open the code, you can learn a lot. Let’s see an example:

/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

The comment comes from the source, so there is nothing more to explain.

There is some more mentionable difference between these two like:

  • normalize doesn’t spam your developer tools – the inspector – with a bunch of useless code because there isn’t a large inheritance chain.
  • Normalize is modular. Its true it is more complicated and longer than the reset but almost always worth the extra. If you need some part, you can customize it and make your build.

Are We Need Any of These?

It is a good question, and the answer is: it depends. Both of these tries to simplify your CSS development process, give you a clean starting point which makes the coding easier.

If you support an extended browser version with IE 11 or 10, it will worth it. A lot of developers and I will still suggest use normalizing because it solves a lot of problems and help to build more consequently.