February 25, 2006

The Dirty Truth About CSS

First, a definition of terms. When I refer to CSS, I don't mean the elegant spec written by Håkon Lie and Bert Bos; I mean CSS as it renders, today, in the so-called standards-compliant browsers. This is the CSS I work with, and it's the only CSS I know. The other CSS is like the woman of my dreams: forever at a breathtaking distance.

With that out of the way, here's the dirty truth about CSS: It's a pain in the ass. More to the point, it's harder to master than tables-based design. I know this because I've mastered both, and CSS was harder. For the first two years of CSS development, nearly every project contained at least one problem that took a ridiculous amount of time to solve. I've now built more than thirty CSS sites, and only recently have the surprises stopped coming. This has meant, in part, learning the quirks and vulnerabilities of the various browsers, but it has also meant getting better at problem solving, which at this level is less about finding solutions than accurately defining problems.

Please note: I will never again use tables for layout. Tables are wrong for so many reasons. But CSS is not quite what its champions, myself included, would have one believe.

I have a client, Christa, I've been teaching CSS. We meet every other week to work on a few sites or pages that have her flummoxed. When I'm lucky, Christa's problems are easy to solve. Here I mean obvious mistakes like:

• uncleared floats
• floats with unspecified widths
• mangled inheritance
• unrecognized default padding or margins

Last week was typical. Christa wanted to build a simple vertical navigation list, the kind that… well, this kind:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Problem was, she couldn't get the background color to appear as a rectangle. A quick glance through her stylesheet revealed why. Christa hadn't known to set the a element to display as a block. That's the technique: you make the a into a block, assign it a width, add some padding, apply background colors to a few a pseudo states, and voila, you have a vertical navigation list. Unless, say, you want the link text vertically centered, as Christa did. Here things get more complicated, because vertical centering in these cases requires not padding or margins, as one might imagine, but setting the line-height to 1 or 100% (which are equivalent in this case), or, if the font-size is set as pixels and not by one or another relative font-sizing method, setting the line-height to the same number of pixels as the font size (i.e., if the font-size is 12px, the line-height is 12px). Got that, Christa?

The problem of vertical centering is but one of several small roadblocks one might encounter when creating a "simple" vertical navigation list. Overall, though, the degree of difficulty here is moderate when compared with some of the true conundrums of CSS.

Again, I don't mean to criticize the brilliant CSS spec; it's just that the learning curve of real-world CSS is precipitous. There are several key concepts to grasp—inheritance, floats, positioning, backgrounds, id's and classes, etc.—but after that it's a long climb to competency, in no small part because of browser issues.

CSS rollovers are a good example. For those don't know this approach, it's an astonishing technique, particularly for anyone who, like me, once relied on Javascript to produce the effect. Sadly, the only method that works in all relevant browsers requires assigning the same background image to multiple overlapping elements—something no sane person would ever think to do. At some point, I'm going to have to explain this to Christa, and I'm not looking forward to it.

When working with Christa, I try to teach her my thought process when studying a design and choosing a method of approach. This is the key moment. If Christa could learn to see what I see, or even half of what I see, she'd be on her way. But it's difficult. I find myself repeating the phrase "except that" a lot—and then I see Christa's shoulders sag and I realize I need to back up and start again.

The lesson is clear: there are no shortcuts to mastering CSS. It takes patience and perseverance, and it's not for everyone. And I think this should be acknowledged, along with all the extraordinary benefits of CSS-based development. Otherwise we run the risk of becoming the worse kind of zealots, the kind who gloss over the bad news because the mission is righteous.

Published in CSS, Web Standards