The long way to a reset stylesheet
Update: Due to the discovery of SMACSS (Scalable and Modular Architecture for CSS) I recently reconsidered the approach to my reset stylesheet. Instead of zeroing the margin and padding for all elements I reduced it to just a few (mostly form and navigational elements) and let all the others, that most of the time need a spacing (like headings, <p>s, <ul>s, <blockquote>s and so on), take their natural course. I somehow saw no reason to reset these elements just to assign a spacing again later. I currently can’t say how this approach will get on, but I’m pretty confident that it will work out pretty well. My current default stylesheet I use for every new project can be found here.
The opinions on reset/normalize stylesheets are deeply divided: almost everybody uses them, but some are also deeply concerned. These doubts are totally valid, because quite often the adaptations are pretty profound. Just look at the most popular: * {margin: 0; padding: 0}. It resets the spacing of every single element and at the worst they have to be set again vice versa. But at the same time it’s also the most convenient and shortest method.
Another approach, first introduced by Eric Meyer many years ago and optimized by Richard Clark not so long ago, is to reset only certain elements and normalize others at the same time. But why do you have to reset every single tag, doesn’t it suffice to leave it as is? Of course, if it doesn’t matter that lists and blockquotes for example have a default indentation and images a border. A much more sensible, soft approach is provided by normalize.css, which recently found its way into the HTML5 boilerplate. Instead of a hard-reset it tends to standardize the appearance of the HTML tags across all browser but maintains the default behavior at the same time.
Since I had a closer look at this boilerplate recently I took this as a template to optimize my own reset stylesheet. One thing’s for sure: It was a long and exhausting journey. On one hand I wanted to keep things short but on the other hand I also didn’t want to make it too pervasive, virtually the best of both worlds. The first thing was to muck out everything that I thought is unnecessary for my needs. For example I can see no reason to standardly style the <mark> tag, because I probably will never need it with a yellow background. Next I summarized similar properties into one line.
After a long period of twisting and turning I still decided to get back to the * {margin: 0; padding: 0} method instead of resetting individual elements. I thought about it for a long time but finally concluded that it would be the best and easiest method to reset everything first and style the needed tags afterwards. Because I neither need that <blockquote>s or <ul>s are intended, nor is it necessary for me that a <fieldset> has a border and padding. The default spacing for headings, paragraphs and maybe ordered lists can indeed be quite handy, but that’s pretty much the only reason for not standardly resetting it for all elements.
One thing that also took me very long was how to approach font sizes from now on. In the past my habit was to set the body font size to 62.5% so that 1em matches 10px, which is very convenient if you mainly rely on ems for everything, not only fonts but also spacing. Unfortunately this practice is pretty flawed and causes some issues in IE (read more about it). Instead a font size of 100% is set for the <html> tag and the actual size you want for all text is stated at the <body>. However the latter is only necessary if you need a font size other than 16px, because that’s the standard one as long as the user hasn’t changed it in his/her browser. To get a size of 14px for example use 0.875em at the <body> (which I actually did), for 12px it’s 0.75em. Everything else that you want to define in ems then has to be divided by the corresponding pixel size – 400px for example is 28.57142em at 14px (respectively 0.875em).
Finally I made some minor additions, such as the styling of the placeholder attribute or to give all headings a line-height of 1, and ended up with the this reset stylesheet, which hopefully will fit my needs from now on.
You should also read my comment why it’s better to use ems in my eyes.
Which method do you prefer? To reset or to normalize? Or maybe you just use the * method?