CSS: Reset Reloaded
What do YOU think of CSS snippets like Eric Meyers reset script? (Smashing magazine has a list of some others at the bottom of article). Do you create your own resets? Are there any other snippets you consistently put into your CSS? Do you have a mini in-house framework you'd be willing to share some of the ideas behind?
Thoughts?
- that he uses one (mostly because I do as well)
- that it's more considered and selective than the classic * { padding: 0; margin: 0; }
I don't like:
- Removing the :focus outline. I understand his reasoning, but don't agree with it. It's a usability thing and I don't think seeing nothing would remind me of anything, personally. That may be more my problem than the script's, though. :-)
- Defaulting the list-style to none. Unless you use lists exclusively or primarily for navigation or other "non-traditional" blocks.
The "don't likes" are minor and easily changed so, on the whole, I like it. Resets are a great tool when they're discriminating in what they reset, I think.
In any case, it seems to be treating the web as print. In most cases, I'd just let the browser do its job. If it looks horrible I'll fix it.
But then again, they don't pay me to be a designer, so what do I know?
Although I think Meyer's reset is somewhat better, the <a href="http://developer.yahoo.com/yui/reset/">YUI page on reset.css</a> gives a good explanation of what this is for. Yes, a site that applies reset.css and nothing else will have usability problems. The point is that you need to specify your own default styles for lists, focus outlines, and anything else you want; you give up the idea that the browser is going to style those things for you. What you gain is consistency across browsers
Each browser has a default stylesheet (which you can't easily see) and there are subtle differences between these stylesheets; if you start with reset.css you eliminate many of the differences between the default stylesheets. An example of this is list styling-- if you let the browser style your lists, there will be big differences in the padding of nested list items between firefox and IE. If you include reset.css, then supply your own list padding styles, you'll get consistency.
I also find that reset.css makes troubleshooting style issues using tools like Firebug a lot easier. (It amazes me that some people can do CSS without using Firebug's document inspection tools).
The slight differences that I'm able to notice don't bother me - but most designers I've worked with design with that in mind, perhaps (including anything I've done). I just don't think that web designs need the pixel-perfect design control you'll find you need in print publication design (which is what doing such a thing reminds me of).