March 28, 2003

CSS is great, but it’s too hard. When even the guy who wrote the books on CSS admits that it has “made the veins in my forehead throb”, you know there’s a problem.

All the stuff I’ve done on the web for the past year or so has been in CSS, and I’ve been gradually re-working older stuff to bring it into the new millennium. So I’ve drunk the kool-aid.

One thing that would make it at least a little easier would be a hierarchy to stylesheet documents. I’m not talking about the cascade effect (which is really neat). I’m talking about a way to organize a single stylesheet document.

As it is, there’s no enforced, preferred, suggested, inherent, or obvious way to structure a CSS document. You’ve just got “selector soup.” This makes a complicated stylesheet hard to read and hard to write. CSS offers contextual selectors, which would be an obvious candidate for hierarchical organization. Rather than having

div#main {margin:2px;}
div#main h2 {color:red;}
div#main h3 {color:blue;}

It would seem eminently sensible to have

div#main {margin:2px;} [
    h2 {color:red;}
    h3 {color:blue;}
    ]

or something like that.

With a structure like this, it would be possible to distill an HTML document down to its tags, and generate a structured list of selectors, to create a stylesheet skeleton.

The other bear, for me, is the layout of major page elements. The whole box model is pretty powerful, but it is unintuitive and there are some things it just can’t do. Imagine a page laid out like this:

header:left	header:right
main content	navbar
footer:left	footer:right

Near as I can tell, this is almost impossible using straight CSS. It might be possible if the header and footer areas are fixed height, probably meaning they contain mostly graphics. It would probably require a lot of extraneous DIV tags. DIV tags are fine up to a point, but nesting a bunch of DIV tags just to get a page to lay out correctly goes against the spirit of structured HTML. Might as well use a table-hack layout after all.

It seems like something that was cooked up to be elegant on a theoretical level without much regard for the kinds of layouts people might actually want to achieve. The layout of this page was achieved through some code that I consider inelegant and brittle.