Style sheet strong arm: Reset.css versus Normalization.css

January 17, 2012 · 1 min read

I have a pet peeve: designers that always start with reset.css stylesheet.  

There are so many flaws with this approach:

  • all styles... all elements, everything, is reset to padding 0, margin 0, font-size: 100% (whatever that means) and so forth.  So utilizing an h1 requires "restyling" an h1 to be somewhat bigger, somewhat bolder than the average text.  And make that bigger and bolder than h2, and likewise h3, and likewise h4, h5, and h6.
  • the css inheritance chain is difficult to navigate.   Since the reset.css touches every single element, and after you've spent time "restyling" every element to have their semantic meaning reflect their visual cues, you end up with many overrides to every style.  IMO this makes it more difficult to hone in on what style is not correct.

The advantages of a reset.css:

  • every element is consistently lame, lacking the visual cue of the semantics of the text

ENTER THE SAVIOR, Normalize.css...

  • It normalizes all elements to reasonable settings.  For example, I've personally noticed that the element is displayed differently in Chrome, IE, and Firefox.  Normalize.css effectively makes the tag consistent across all the browsers... winning!
  • It tackles bigger problems that were out-of-scope for reset.css, like old browser handling of styles

I would suggest all developers, designers, and HTML gurus to rethink using that reset.css, and look into  and put down that reset.css, reset.css is for losers.

This article is part of the GWB Archives. Original Author: Eric Newton

New on Geeks with Blogs

  • We Won The One Award I Actually Care About

    Full Scale made the Inc. 5000 for the fifth year straight, the 12th listing across my three companies. Here is why the one award you cannot buy is worth stopping for.

  • Your Customers Build the Features Now

    I let a tool I liked sit dead for a year rather than build the features I wanted. An MCP server meant I never had to, and your customers can do the same to your product.

  • Get the Size of a Directory in Linux the Easy Way

    du -sh for the quick answer, ncdu for the cleanup, df for the disk itself: every command for checking directory size in Linux, plus why du and df never agree.

  • Vim Search and Replace: The Ultimate Guide

    One :%s command replaces every match in a file before a find dialog would even open. The Vim substitute patterns worth the muscle memory: flags, ranges, capture groups, and multi-file edits.