love is all around

I’ve been doing web design for several years now, and have learned the following hard lessons:

• CSS sucks for layout - floats are great for floating an image in a block of text, but are profoundly unintuitive for doing page layout.
• This sucking has been compounded about 1000 times by broken layout models in popular browsers - Microsoft is mostly to blame here. I can’t imagine how many cumulative hours have been spent on this planet just solving cross-browser CSS issues. I’ve spent my share. It’s utter hair-pulling madness and a dreary waste of time. I am so grateful for IE7 finally getting it right, for the most part, and for JS-based libraries that automatically fix issues in IE5 and IE6.

I think another reason I find CSS so frustrating is that there are no libraries. When I’m coding in Perl, say, all the heavy lifting is done by (hopefully) time-tested, heavily regression-checked libraries which I cobble together to make cool stuff. I work best when I’m a code DJ (mixing and remixing code written by others) rather than a code composer. But in the layout realm, it always feels like a huge step back - I’m having to debug all these stupid layout problems that other people have had to solve as well, thousands of times over. Solutions to CSS problems are piecemeal and scattered all over the web, with some people charging you to read them. It’s hugely frustrating and a big waste of time.

When I’m building a new site design, I usually start from scratch with the standard CSS ‘reset’:

* {border: 0; margin: 0}

to fix several box-layout compatibility issues. Then I add a rule to set the default font, and on it goes. This is crazy-making for a developer used to high-level languages and huge open-source module repositories.

However, it appears that help is on the way - Yahoo! has built a CSS foundation layer as part of a larger UI toolkit. This foundation has three components:

• Reset CSS - This module levels the playing field between browsers by normalizing the default rendering of all HTML elements. It allows you to be more confident that things will look the same between browsers.
• Fonts CSS - This module offers cross-browser typographical normalization and control. Provides font degradation paths that work across operating systems, and allows for user-initiated font resizing.
• Grids CSS - This module provides templates for fluid and fixed-width layouts that are easy to customize.

And you can get all three conveniently packed into a single compressed file to drop into your next layout.

So much for having to reinvent the CSS wheel for every new website.