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?

  • Andrew

    Got my ass kicked lately by percentages and ids..
    I always learn the hard way :D
    Will have to remember to check this article again when I start cleaning the mess I made.

  • hannes

    I totally get your *-approach cause in some situations/projects it makes sense to start from scratch. For a smaller blog or a general smaller page I would give normalize a try.

    I’m still not quite sure about the em-approach though. Some years ago it made sense, cause px couldn’t be zoomed. But nowadays I have the feeling, it’s more convenient to use px, unless you want your font-size depends on a width.
    Maybe you could explain your thoughts behind this, so I’ll get the advantage too ;)

    • Christian Krammer

      I’d love to!

      One word: responsiveness. In times when every website is considered to be fully fluid, responsive and “relative” (to the browser window), it’s kind of weird to use an absolute unit like px. Of course it’s by far easier to handle and every modern browser defaults to page-zoom, but for me it just not feels “right”.

      Furthermore the media queries I use at wouldn’t have been possible without ems. As soon as the page width exceeds 1024px, the general size of everything, fonts and page elements, is enlarged a little bit (the font-size at the <html> tag is changed from 62.5% to 68%) so that the available space is used better. This wouldn’t have been possible without using ems at every single spot.

      If you don’t have such high requirements you will of course be pretty happy with px for everything.

  • hannes

    Most media-query stuff I liked so far was ‘just’ adapting the layout, not really the font-size.

    But yes, you don’t wanna define a new px-font-size for every element in every media-query. I guess…
    Some don’t seem to care though :)

    Anyways, thanks for explaining.

  • Nick Dunn

    My understanding was that the root wildcard * selector is slow. It will apply to every single node in the DOM. Every single one. Which from my hunting around is generally frowned upon because of performance issues. But happy to be proved otherwise!

    • Christian Krammer

      Is there a source/proof that the * really is slower? A quick test of mine didn’t confirm that it is slower/faster if you individually name all elements instead of the * selector.

  • Nick Whitmoyer

    Small little typo, it’s “Eric Meyer” not “Mayer.”

    To answer your question: These days I prefer to avoid the CSS bulldozing approach and normalize.css does a good job at reseting and rebuilding.

    • Christian Krammer

      Thanks for the tip – corrected.

  • Ketones

    I agree with you on the font size issue. Really there’s flaws/faults with IE, Firefox and Chrome works fine at handling this requests. Something for coders to keep in mind on.

  • Markus

    I chose exactly the same way. After using a slightly modified version of Eric Meyer’s reset.css I did take look at normalize.css.
    My conclusion was that normalize.css is too long and not the best way I personally can think of. I know which elements I use in the source code and how they shall look. So the most effective way of achieving this is to reset completely the elements and apply my wished style.

    • Christian Krammer

      Great that we have the same opinion on this topic. :)

  • AucT

    dont know why but I fill good using simple reset like this:
    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote {
    margin: 0; padding: 0; border: 0;

  • craig

    Sorry i know this a little off topic but re: ems – surely the one flaw is when someone changes their browser’s font settings – a lot of ems based sites end up trashed (including your own navigation bar). Isnt it safer to use pixels to keep fonts stable across all browser widths and use responsive design just to reposition the page elements (rather than scale them) ? (sorry if that’s a stupid question – i am still figuring all this out)

  • craig

    (or is it just too paranoid to worry about people changing the base font size?)

    • Christian Krammer

      That’s a good argument, craig. I’m certainly aware that there is a point somehow when things break if the font-size is enlarged. But that’s the natural way of things, of the web. If people want to have a huge font-size, give it to them. However nowadays most browsers zoom the whole page and not only the font-size, so the problem you mention shouldn’t occur.

      And believe me, the advantage of using a relative unit like em (or even better rem) by far outweighs the above mentioned shortcoming.