I’ve been doing a lot of CSS work lately. I love it. I really do. I even like to fix CSS bugs caused by other developers. Digging through their mess helps make me a better developer. But here’s one thing that can make all of us better CSS developers today: Reset Styles.
The concept is simple: Different browsers render certain defaults in different ways, so begin with a baseline that creates a consistent “zeroed-out” set of styles on which to build. This goes hand-in-hand with my last post about IE7, which definitely has some differences in rendering lists (among other elements). This can destroy your site in IE7 if you are using lists for navigation.
The key with resets is to apply them before you begin development and be absolutely sure they are the first stylesheet applied to your pages. That’s why I typically use the name “0reset.css” and that’s a zero at the beginning–some resource managers will autoload yor CSS in alphabetical order (Yeah, I’m looking at you, Nodus). Inside of 0reset.css I can write the global styles for the site, and include the reset styles near the top. They don’t take a lot of space so I don’t think it’s necessary to separate it into its own stylesheet–in fact you may get worse performance from having mulitple requests.
Here’s is my favorite reset stylesheet to start off with on a new project. This is a product of my extensive re-writing over the last 2 years. I have seen many reset stylesheets on the Internet, ready to work, but none of them really fit just right for my projects. For experienced developers, you may want to visit http://www.cssreset.com/ and put together your own from the ideas of others. And as you work, be sure to consider cross-browser fixes that you want to include in every new project.
That first selector in mine is technically the entire ‘reset,’ but after that, I’ve applied some additional styles that I find helpful, including an import from Google Fonts to remind me to implement web fonts.
Hopefully that helps. Good luck with your resets!