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.