CSS Reset

Eric Meyer is one of the original Web Standards Gurus. His work is good, and pure, and great time savers for us minions. Case in point: Eric’s work on reset.css.

What reset.css essentially does is set a common foundation in all browsers by removing the browser’s default rendering of HTML elements.  This makes it easier to author a web document so that it can look very similar in each separate browser.

The problem

I’ve been happily using reset.css on many projects, never noticing along the way the time I’ve spent on redefining margins on <ul> and <p> elements – time that could have been saved by defining a ‘Sensible Default‘.

Here’s an example…

ul {margin:0; padding:0; list-style:none; /*etc*/}

Reset.css would set all Unordered-Lists (<ul>) to have no margins, and no list-style.  This was great for defining semantic menus in the navigation and footer blocks, but…
the rule would cascade! (DUH!) and each time I wanted to have default rendering of a <ul> I’d have to define it explicitly. This situation would be exacerbated for each case when an <ul> needed to be displayed as expected, e.g. in a sidebar:

#sidebar ul {margin:1em 0 1em 2em; list-style:disc;}

The situation

I started working with Christo on a Django web-app, where I basically had to handle the templates, HTML and CSS + Supporting Images. I was using reset.css as normal.
Christo started voicing his frustrations with having to rely on me to define each and every case where a paragraph was needing margins, or an unordered-list was missing its bullets. It came down to a point where he asked me to remove reset.css. My Standards Zeal kicked in and I refused it, saying I’d have to create more exceptions than the rule by not using reset.css.
It ended up in a stalemate, so I thought I’d open up the dialogue to the StackOverflow audience. I put together a quick question and waited 24 hours for the answers to roll in.

Enter: Sensible Defaults

It turns out that the practice of defining Sensible Defaults is a common Programming tip. (This just goes to show my lack of formal programming experience!) Defaults can save a lot of headaches, and this situation of mine was no different.

The solution

Christo and I met half way by overriding the Reset rules just for the content area.

#content ul {margin:1em 0 1em 2em; list-style:disc;}
#content p {margin:1em 0;}
/* etc */

This way I could rely on Reset.css to ease the styling of header and footer elements, and then reset the reset by providing default styling to any content items such as paragraphs and unordered-lists.

TLDR? A warning as a conclusion

So, if you want to use reset.css then please, do The Right Thing™:

• Don’t be an idiot and implement something without understanding it
• Define sensible defaults for where they’re needed.

That is all.