On CSS Resets
I’ve been using CSS reset code for quite a while. My “weapon of choice” in that category has been Eric Meyer’s version. But lately I’ve been rethinking the proposition, mainly because of some “interesting” issues that crop up repetitively.
Most of my clients don’t accept arguments in favor of letting the user’s default font size stand, for example. And maybe I’m just too old of a code monkey but setting properties on, for example, an h1 tag that I know for a fact I’m going to change before I ever use the tag just makes my skin crawl.
So I’m leaning towards replacing the CSS Reset tool in my toolbox with something else; a CSS Defaults tool.
Now, maybe I’m just dense, maybe I don’t get the whole concept. But it seems to me the purpose of the CSS is not to undo, and then redo or do again differently, but rather simply to do. Shouldn’t I, you know, get it right the first time?
But browser defaults differ. I got into the whole reset thing because I could see the good in starting from a known base.
So that brings me to the CSS Default tool. And no, I’m not going to post it. Not because I want to keep it secret, but because its very nature prevents a posted one from being any more useful than Eric’s reset code.
The best I can do is tell you how to create your own, by telling you how I’m building mine. I start with Eric’s code and first, because I’m also buying in to Andy Clarke’s separation of color, type, and layout code, I break it into three chunks (to fit the color, type and layout sheets, if you use a single sheet skip this step).
Now I use the code to remind me of the defaults to set. In the first pass, I change the reset rules to conform to whatever the default values for the site are going to be. (If the ordered lists will be roman numerals, for example, I change the list-style:none for them, etc.) If so, sorry I took so long to see it. If not, well then we’ll just have to agree to disagree on this.
Once I’ve changed all the reset values to the default values I want for this site, then I circle back for another pass. The last pass started the foundation, now the next one builds out the rest of the defaults for the site, the ones that CSS reset didn’t address (such as font-weight and font-style for headers) and starts building the exceptions.
Rinse, Lather. Repeat.
So you see, any two default setups I build will have differences. I’m simply using the old CSS Reset code as a checklist of properties I need to set to ensure I’ve covered what needs to be covered. That way nothing gets set and then set again before being used, something which always bothered me.
I dunno. Maybe that was what Eric was proposing all along and I was just too dense to see it. Could be. He has a brain and knows how to use it. (I remember the first time I saw his complex spiral demo I felt like a chimp kicking up sand and throwing my bone up in the air beside a black monolith.)