CSS resets are wrongly considered as a necessary part of any CSS template. After fixing a long series of WordPress themes that relied massively on this feature, I have to say that CSS resets are evil. More precisely, they're overused even when they're not necessary. Let me put it in this way: are we absolutely sure that all HTML elements must be reset? Are we absolutely sure that, in any circumstances and templates, we have to normalize the default rendering of all elements? Are we absolutely sure that all the default styles used by browsers on all elements need to be reduced to a lowest common denominator? Or, more properly, should we start rethinking the whole process behind normalization and realize that perhaps some default styles might be useful in some cases?
Consider the example of a navigation menu. After normalizing all the lists, we can simply write:
ul#nav {
height: 2em;
}
instead of:
ul#nav {
margin: 0;
padding: 0;
list-style: none;
height: 2em;
}
That's a good point for the CSS reset approach. But there's a drawback: since you've reset all the lists, you have to specify again their base styles when you actually want a list to be displayed as usual:
#content div.post ul {
margin: 1em 0 1em 2.5em;
list-style: disc;
}
Is it really a good point for using a global reset? I don't think so. Moreover, if you reset some particular HTML elements used by a couple of popular CMS (including WordPress), you'll probably get into trouble when your clients copy and paste a formatted text document into the CMS editor.
If you write this:
b,i {
font-weight: normal;
font-style: normal;
}
you can say goodbye to the basic bold and italic styles of such elements. Are you sure that you actually love trying to figure out what's wrong with your theme only to find out that it's all caused by two simple CSS rules? I guess your clients will love it too.
Another interesting thing happens when you reset the base font size of the headings to 100%. The following declaration is global:
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
But there's no actual need to do this because the following standard reset:
body {
font-size: 62.5%;
}
automatically normalizes your base font size so that browsers can actually calculate the following rule correctly:
h1 {
font-size: 2em;
}
In other words, CSS resets are not necessary. More surprisingly, CSS resets don't take into account the effective normalization of form elements:
input, select {
font: 1em Arial, sans-serif; /* normalizes height */
vertical-align: middle; /* inline elements */
}
textarea {
display: block;
overflow: auto;
font: 1em Arial, sans-serif; /* default font is monospaced */
}
input:focus {
outline-style: none;
}