CSS rant

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.

4 thoughts on “CSS rant”

  1. CSS1 is delightful. The basic stuff (fonts, border, margins, etc.) the browsers all seem to have gotten mostly correctly. If you can at all think in terms of document structure (e.g. “this is a section heading” instead of “this should be big and bold”) it’s wonderful.

    CSS2 is an abomination. Mind you, I’ve done UI coding. I understand widget packing algorithms. I’ve coded for X and Tk by hand. CSS2 makes my ears bleed. Moreover, it is frustratingly unreliable and inconsistent in current browser implementations.

    Adam, you cite a moderately complex layout example that’s hard. Sometimes simple layout is hard. Try this one:

    * left column – variable width, expanding to fill page

    * right column – fixed width, in some device-independent measure

    The easiest solution is to restructure your document so the right column content comes first, and float it into place. Sometimes (often times) that’s just not the logical way you want to structure your doc.

    I’ve been toying with the stuff, and I’m beginning to think I should just stick with tables for anything that cannot be managed with a simple float.

  2. I’m an old dog who learned his HTML when NCSA Mosaic was the fanciest browser on the block. I’ve tended to view most web innovations since tables as badly-engineered messes of dubious value. I recognize that I’m a reactionary.

    So I was about to roll up my sleeves and learn CSS. Chip, are you saying that that’s not necessarily a good idea? Is there a post-CSS manifesto out there I could hitch my wagon to?

  3. Chip–

    The layout you describe is pretty much what I’ve used on my web page (actually, what I’m using is more complicated, but same idea). I agree that a logical document structure and a CSS stylesheet that does what you want can be mutually exclusive, depending on what you want.

    Of course, the way browsers implement CSS is a different issue–not necessarily a drawback of CSS itself (though I’ve read that CSS2 is too vague to implement fully).

    Prentiss–I’ve been messing with HTML as long as you (interestingly, I can’t search archive.org before 96). I feel your pain. I think CSS is worth it. The HTML is vastly cleaner (my MT templates are less than a screenful each) and is logically structured, which could be important when we’re using devices to access the web other than normal browsers.

    AFAIK, there is nothing beyond CSS, but they are working on CSS3.

  4. I know what you mean. I find myself fighting with a 2 column layout, as described above, on a couuple of sites (Geodog’s MT Weblog and (sarswatch.org. Each time, after getting it to where I think it is right and it is what I want, something (too long blogroll entry, browser on another platform, etc) blows it up, so you can’t even see the second column. I had one reader complain that the column had disappeared at one point, when I hadn’t changed anything.

    And let’s not even talk about relative fonts and I.E 5.5 vs. 6.0.

    Still, I think that CSS is better than tables. I use Topstyle, which is a godsend for fiddling around with stylesheets.

Comments are closed.