A Touch of Class


Layout Is Expensive

This would be my rant, dated 24 March 2008, i.e. after reading lots of ranty feedback on why CSS sux and why we should have This Super-Powerful Layout Solution That Would Solve All My Problems. Figured I should post it together with the last entry.

A lot of people complain about limitations in the layout capabilities in CSS. Layout in CSS is a pain, and it's a pain because CSS originally wasn't designed for coarse layout, only for linear documents. The CSS Working Group totally understands that CSS today is totally incompetent at doing layout. We are amazed at the hacks designers have had to come up with and dismayed at how brittle they are. It is very, very obvious to us that CSS needs better, easier, more powerful layout capabilities.

At the same time, defining a CSS layout system is hard. It's expensive, and I don't mean money but skill×time, which is rarer. Look at CSS2.1 Chapter 10 for instance. This chapter discusses the calculation of widths, heights, and margins. It doesn't cover floating, positioning, or margin collapsing; just "how big" is the width, height, and margin for each element. I'd estimate the total work that went into that chapter is equivalent to half a day of expert time per sentence, and it wouldn't surprise me if the actual figure was much higher. That doesn't include work on test suites or implementations. And I'm sure it still has errors in it.

Unless you're working on a CSS layout engine yourself, the level of detail, complex interactions with the rest of CSS, and design and implementation constraints we need to deal with here are more complicated than you can imagine. So for everyone out there who wants CSS layout to improve, I am begging you, please, don't come to the CSS Working Group with a loosely-defined layout proposal that you think will solve your problem. Chances are your proposal is really hard to define and incorporate into existing CSS layout systems at the level of precision we need. If we can't work out from your layout proposal what the real problem is, then you're not giving us a chance to find an easier solution. We'll either ignore your proposal or waste lots of time trying to make it work, without knowing if it actually solves the problem well.

So, please, instead of giving us proposed syntax for new layout features, come to us with your problem. Illustrate the layouts you want to achieve, how you want them to behave as the window and font sizes change, what markup you want to have underneath it, and then, maybe, then give us a hint as to how you want the problem solved.