Developing CSS With a Clean Slate

I had pleasure of catching Eric Meyer’s presentation at An Event Apart earlier last month on the differences in the various browsers’ default stylesheets- which often accounts for minor differences in rendering that can truly vex your development processes.

Eric’s sage advice for ‘evening the scales’ was to first globally reset a baseline of elements to a consistent and known quantity (without resorting to using the universal selector, then build up your own project-specific styles upon this baseline. This greatly helps account for varying differences in box-model rendering, line height, fonts, etc. which are often interpreted in minutely-different ways by the various browsers’ rendering engines. He even kindly offered to share his own version of such a ‘reset’ stylesheet.

What I did not know – and Eric made me aware of via his ‘blog posting earlier today – is that the YUI team at Yahoo! has already published their own version of a reset.css file to do exactly this.

You can get more information at the Yahoo! UI Library site, along with extensive documentation, ‘quick-start’ notes, and community resources to discuss it’s usage. Very handy, and definitely worth a peek if you’re having issues getting pixel-perfect alignment across your test browser suite.