CSS inheritance chainBack last fall I started using normalize.css instead of the very popular HTML reset that came standard with my current theme framework of choice. I like it a lot and have stopped using resets completely. I’ve customized it to fit my project needs and prefer it to resets for a few reasons:

  • It doesn’t target every existing HTML element – only those that really need normalizing, according to the developer’s research in major browsers.
  • It keeps browser defaults that are useful and attempts to make them render more consistently across major browsers.
  • It works fine on IE6+. I currently support down to IE7 so this is nice.
  • It fixes some common browser bugs that resets normally don’t touch.
  • And the big one that makes me really love it: less clutter when debugging.

As an example of the last point, here’s the kind of thing you see with a reset in place, using Chrome Developer Tools to ‘Inspect Element’ (see image to the right). normalize.css doesn’t use many blanket rulesets that include a large number of selecters like resets do.

Here’s a nice overview of normalize.css from the developer Nicolas Gallagher.