Which CSS Reset Should I Use?

The question of which CSS Reset to use is one that developers and designers spend far too much time worrying about. In this article, I’ll cover two important points that can hopefully offer a little insight into the thought process:

  • Firstly, to simplify and clarify what exactly we need from a good CSS Reset (and what we don’t!)
  • Second – and more importantly – to persuade people to stop just using the same, unmodified CSS Reset that came with their framework, without giving any thought to it.

Read on for some debate, or click here to jump to the quick n’ dirty answer.

The Thing About CSS Reset Scripts Is…

When you include a CSS Reset in your stylesheet, you’re actually asking the browser to do an awful lot of work, in that you’re applying a CSS style to every single element on the page. This is totally cool, as long as you know what you’re doing (in any case, it’s only older browsers that will struggle with this.)

Then, after zero-ing out every element’s default browser style, we go on to restyle them with fairly complex CSS rules. Not highly optimised, but it works. Which is good.

The issue is that many people just chuck in any old CSS Reset without modification. Which is bad.

Eric Meyer, when he pioneered the technique of CSS Reset (see Eric Meyer’s Reset CSS), explicitly stated that:

The reset styles given here are intentionally very generic. I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.

In other words, this is a starting point, not a self-contained black box of no-touchiness.

Nice guy that he is, Eric was trying to persuade developers to build on top of his Reset stylesheet, to hack it, tweak it, make it their own, and then (possibly) republish it. Why is it, then, that so many seasoned developers use it, and its descendants, without taking time to modify? Could it be laziness, or lack of understanding?

Let’s try to clear this up, anyway, and answer the question.

The Easy Answer:

If you want to know which CSS Reset to use, there are a couple of pointers you can look at straight away. Each of these links leads to some useful discussion and documentation:

For most people, it will be that simple – just drop it in, let it do its thing, bookmark and come back to CSS Reset any time you need to copy/paste the code of your choice.

The Real Answer

Ok, so I was a little misleading above. If you’re looking to take this up a notch, it’s time to design your own CSS Reset, which you can use in all your projects. Simple as that.

One of the most important things is that your CSS Reset should be modified/tweaked and optimised for every project you do, if at all possible. This is a problem when using something like the Tripoli CSS Reset, as it’s a real pain to edit.

Each of the CSS Resets featured on CSSReset.com has documentation and discussion about it, with some pros and cons. Some could do with a little more explanation, but I’ll get to that when I have more time (I promise!)

For me, and on CSS Reset.com, I use the HTML5 Doctor Reset, only slightly modified, because it pretty much meets every one of my needs. Would I use it in every project? Heck no! Yet yime after time, I see people using something like the HTML5 Doctor reset on simple pages where they’re never, ever going to even have any HTML5 tags.

Likewise, I see people using the Universal Selector ‘*’ CSS Reset, on large-scale websites or webapps, where something more specific like the YUI 3 CSS Reset would have been perfect – and highly more efficient! (Side note: please don’t think that because it’s only 4 lines long, the Universal Selector CSS Reset is better optimised than the Meyer Reset – it’s really, really not.)

I don’t want this to get too long – it shouldn’t be very complicated, and god knows I have a habit of making things sound more complicated than they need to be – so I’ll try to wrap things up. I will come back to this at a later date and make it more concise!

Top Tips for CSS Reset Success

  • Find a CSS Reset that works for you, and customise it.
  • Avoid using the ‘*’ (universal selector) anywhere in your CSS Reset. There’s just no excuse.
  • If you set outline:0 anywhere (esp. on links and form elements), you need to remember to redefine :focus styles, otherwise people who tab through things (like me) can’t work out which element is in focus (usability fail)
  • Once you’ve got your CSS Reset that you like and will always use, keep it on hand and tweak it for each project.
  • Remember – there’s no point setting body { line-height:0 } in the reset, then body { line-height:1.5 } later on, when you could have just set 1.5 to begin with.

That about wraps ‘er up. If you’ve got any feedback on this article, don’t be shy – mail it in and I’ll be happy to publish your improvements, with credit.

Joss