Updated: March 3, 2011
This page was originally published in 2009 under the title “No Reset: A Base Stylesheet For Your Projects”. While I stand by most of what I wrote on reset stylesheets at the time, I have since changed the proposed base stylesheet quite a bit, trimming it down. See the new base stylesheet or keep on reading for a discussion of CSS Resets.
Reset stylesheets, also called CSS Resets, are short stylesheets whose aim is to reduce browser inconsistencies by nullyfing a good deal of the browsers’ default CSS styles. In my opinion, they are unecessary and sometimes harmful. I also think there are better alternatives.
What’s wrong with reset stylesheets? Not much, really. Old-style CSS Resets had problems, but modern-day reset stylesheets such as Eric Meyer’s Reset CSS are really decent tools. So why don’t I use them? Let me explain.
Old-style CSS Resets went like this:
* {margin: 0; padding: 0; border: 0;}The main problem with this code is that it applied to all
elements with no discrimination. Which caused some problems. For
instance, form inputs would lose their default, OS-like style
because of the border: 0;.
More modern CSS Resets evolved into small stylesheets listing all relevant
elements and applying more precise styles to them. They are more precise, but
as they try to cover a lot of things they are prone to errors from time to
time. For instance, styles such as a {outline: none;} will
break keyboard access on a whole site in most browsers.
Now, that kind of error can be corrected. Eric Meyer’s Reset CSS still does it, but hopefully that will get fixed eventually. (Update: it did get fixed in the 2.0 version.)
Another issue with reset stylesheets is that when they use inherited CSS
properties (such as font-size) and apply them on virtually any
element in the page, some webdesign and debug tools will show you a lot of
barely relevant information. This is what you
get when inspecting an element with Firebug on a site that uses a reset
stylesheet. (Note that other tools, such as Webkit’s Web Inspector, collapse all
identical inherited styles in just one blob. If Firebug ends up doing the same,
this problem will be history.)
Finally, the main problem with reset stylesheets is that they, well, reset all default browser styles. The reasoning is that there are many inconsistencies between browser defaults, and those defaults should be erased so that the CSS coder can define everything precisely.
My take on this is: browser defaults are sensible and useful. Thanks to them, your content will always be readable (though not sexy). If you take them away, you risk having content (say, user-generated content) that ends up being unstyled, raw, with not even some margins to give some rythm to that content.
Moreover, if you think browser defaults cause most of your layout inconsistencies, you are wrong. With sufficient knowledge of CSS, you will realize that most of those things you thought were inconsistencies due to browser defaults are actually caused by:
(I happen to think the collapsing margins mechanism is the greatest thing since sliced bread. It is a bit troublesome sometimes, but it’s a powerful means of managing spacing between blocks, headings and paragraphs.)
Granted, there are a few inconsistencies between browser
default styles. It’s mostly about margin/padding on
the body element,
margin-left/padding-left on the ul and
ol elements, and the font-size of h1,
h2, etc. elements.
If you feel like those few inconsistencies justify setting everything to
zero then having to specify the exact margin and padding of most elements in
each situation, then do use a reset stylesheet. If you feel that setting
margin: 0; padding: 0; etc. on a list of 80 elements or more is
overkill or not that subtle, I suggest you take a look at this
simple “base” stylesheet.
