CSS Tip #1: Use A Reset

CSS Tip #1: Use A Reset

So I've been thinking for a while about what I'd like to blog about, now that I'm at least comfortable (if not perfectly happy) with the presentation of dtott.com. What I decided on is starting an ongoing series of in-depth CSS tips. This will (obviously) be the first one.

What's A Reset?

A CSS reset is a set of CSS declarations designed to strip away all possible default formatting before adding any of your own. Every browser out there has default formatting for every HTML element. The body element in almost every browser has padding, margins, a set font size and color, and a set background color. Headings have margins, padding, different font sizes, and different font weights. Turn of CSS on your browser while viewing a site, and you'll see the default CSS that the browser uses. What the reset does, then, is strip all of that away. Headings, paragraphs, fieldsets, and everything else, set to one font, one size, one weight, and no extra paddings and margins.

But...Why?

Well, there's a few reasons. First, by resetting the CSS, you remove the temptation to rely on browser defaults that may or may not be the same cross-browser. H1s, at least to the naked eye, are pretty consistent across the field. What about fieldsets or dls?

Second, removing that temptation will make you a better CSS coder. By having to explicitly set each attribute on each element you want to use, it forces you to learn what you might normally gloss over.

Third, it will make your code meaner and cleaner. You won't have to set the margin and padding every time you use a ul unless the design calls for it. No more wasting lines and time undoing what the browser does for you.

OK, I'm Sold. What Now?

Go out there and get a reset! If you are a control-freak-ninja-CSS-master, you could write your own, but there's no need for this. Eric Meyer has already done it for us: The Eric Meyer CSS Reset . Is this the only one? No. The Yahoo! User Interface Library has a reset , and I'm sure there are more out there. Eric's is the best. I could go into why, but it's already been done here and here (including the comments). Just go, get the code, and put it above your stylesheets.

Cool!

I concur. Do you concur?

Comments (archived for posterity)

  • Brad Dielman commented

    Good article, Dan. I’ve been using Eric’s reset as well and I agree with you that his is the best.

  • Jerry Nummi commented

    I concur. But the Meyer hack feels too bulky so I usually stick with my own reset:

    
* { margin:0; padding:0; outline:0; line-height:100%;
}

    I’m probably missing out on a few things and there might be some performance issues with the asterisk, but in the end this helps a lot.

  • Dan commented

    @Brad - Thanks. As usual, you and I are of like minds

    @Jerry - Thanks for stopping by. My biggest complaint with the *{} selector is that it also affects inputs and textareas, which can lead to unpredictable results; the idea of the reset is to make everything predictable. Obviously, with form elements, this isn’t always possible (*cough cough* safari *cough cough*). Eric Meyer wrote an article about some formal weirdness; you should check it out.

  • Jerry Nummi commented

    Dan, I have not seen any weird behavior from form elements due to my hack.

    But… speaking of Safari :) Your “you can use these tags” section is having some issues in the Safari 3 beta. Not sure about Safari 2.0.

  • Dan commented

    @Jerry - re the bug in safari: thanks for that. Got it taken care of.

  • Kilian Valkhof commented

    Having used the * {} for ages, I’ve recently searched for a better one. (Actualy, I went with * {margin:0;padding:0;} a img {border:0;outline:none;} ) My major gripe with * was indeed the problems with forms. (and I suppose it’s slower as well, though I never noticed that)

    However, between Eric meyer’s and yahoo’s reset, I’m going for Yahoo. Eric’s one is indeed more in-depth, but that also means you’re resetting things you never use (for example, q elements, :focus element resetting) when I removed those, I practically ended up with the yahoo-style reset :)

    Of couse, I think everone should edit either css reset to what works best for them, and go with that.