Good. Evil. Bratwurst.

CSS Reset

Posted on by arlen

Eric Meyer recently posted an update to his CSS reset file, and that plus other commentaries I’ve been reading made me ask the obvious question: Why?

I know the logic behind it, I’m just not sure I buy into it wholeheartedly. Why add yet another file, yet another http request to the pages? I’m serious. I don’t see the reason.

It’s not that I don’t see the reason for setting display parameters to known values (margins, padding, etc.) because I do. It’s obvious to anyone, I think, who’s done more than a handful of medium-sized sites that too many of your bugs are caused by browser defaults that you hadn’t reckoned on.

But why is that a reason to add another file to what you’re serving up? Why is that a reason to change the settings on many parameters more than once (thus downloading the selectors and the rest more than once)?

It just doesn’t make sense to me, not when there’s a ready alternative that doesn’t suffer from any of the drawbacks: start your design from a reset sheet. Change the values in the reset sheet to the ones you’re going to use in that design.

For example, in Andy Clarke’s terrific book Transcending CSS he suggests using separate stylesheets for colors and typography and layout. I can’t buy that, either, but I can come close. I’ll buy the color sheet. I find it difficult to divorce typography from layout (is line-height typography or layout? How about text-align: center?) but colors, yes I see that.

But now add a special reset sheet? My soul with it’s indelible memories of the World Wide Wait on a 28.8 modem rebels at the thought of wasting that many bytes. And the sheer size of some of them is scary. Yahoo’s version looks like it could take weeks to download!

No, I just can’t bring myself to commit so many electrons to a life of futility. Instead, I’ve found my own comfort zone with a couple of files. I break the layout and color-related defaults (let’s face it, we’re not really “resetting” anything, we’re simply changing the default presentation of some tags) into separate files and save them as my “start here” CSS files.

As I build a layout I’m comfortable with, I file away the layout file for reuse. The next time I want to build a layout like this, that’s what I’ll start from. And the original “start here” files are saved for the next time I need to start a layout that’s unlike others I’ve done.

It doesn’t take any more time to start from a similar enough layout and get to the next one, and in fact it will often take me less time, because there are just a few settings I may want to tweak from the last go-round, rather than 20-30 of them. And I’m not wasting the electrons to set margins and paddings and font-size on header tags multiple times.

What about the IE-specific exceptions? Well, what about them? I’ll have them in the “start here” set, and I’d need to modify and track them in whatever file I ended up building, so where is the added complexity? Could it be in the addition of one IE-specific reset file as well as one IE-specific layout file? No, wait, I’m subtracting a file, aren’t I? Because I’m reusing the IE-specific file for this layout.

So why so many files? I know Eric (I don’t feel comfortable asserting friendship, but at the least he’s an online acquaintance of several years). I know him well enough to be sure he doesn’t leap off ledges blindly. I’m willing to admit I may be missing something. But What?

Leave a Reply

Your email address will not be published. Required fields are marked *

September 2007
« Aug   Oct »