Essential CSS: The Reset

Rommil Santiago — Fri, 16 Jan 2009 12:28:18 +0000

Resetting CSS styles will save you a lot of time

One of the most essential tools I have when I build a web site is the CSS reset. What the reset does is basically strip some or all the default styling (like padding, margins, font-sizes, etc) applied to HTML elements by different web browsers. The reason we want to do this is that each browser has its own default set of styles, and guess what – they differ from browser to browser. Starting from a fresh slate is often the easiest way to shorten development time and get the most predictable cross-browser results (though some designers, like Jonathan Snook, @snookca, don’t personally see a strong need for resets). If you see the benefit of using CSS resets, creating your own reset is very doable, and honestly not super difficult, but why re-invent the wheel? There are plenty of reset CSS code out there that you can use. I’ve listed below some of the more popular reset resources that I know of.

Yahoo’s YUI Reset CSS
This reset does some basic resetting of margins and borders, as well as remove some table borders, and form inputs styling. It validates as CSS 2.1 against W3C’s Validator.
Eric Meyer’s 2008 Reset
This latest version from Eric Meyer (@meyerweb), based on Yahoo’s reset, also validates as CSS 2.1 against W3C’s Validator, and is used in the 980 grid system (which is a solid starting point for any web design project). Eric’s reset is well known for resetting all default styles (generally speaking) – meaning you have to style virtually every element (except for notably form inputs). Though this is great for advanced designers, it may not be for everyone.

So, say, you do want to reinvent the wheel and create your own homemade reset file. Here are some pointers from Smashing Magazine:

Place the reset code first
Obviously, resetting the styles at then end of your CSS is counter-productive.
Avoid *{padding:0; margin:0;}
I’m guilty of doing this. A couple of years ago, it seemed like a good idea. One line, reset everything. But according to Christian Montoya, this method is very intensive for the browser, and it’s better to write specific selector resets.

While this is no where close to a new technique, it’s one that many designers aren’t aware of (along with classing the body tag), and I feel it’s worth familiarizing yourself with.

What are your thoughts about CSS resetting?

Bricks and Clicks: A blog by Montreal-based Web Marketing Consultant, Rommil Santiago » Reset

Essential CSS: The Reset