The Failure of CSS

By way of Ajaxian I came across a post by Alex Russel on the failure of CSS and how CSS 3 just doesn’t solve any real issues. I can’t tell you how glad I am that for my career as a web developer chose Flash and Flex instead of the Ajax path. One large contributor to that choice was my disappointment that CSS never actually made layout for the web any easier.

CSS was touted as a way to style and layout web pages. Styling it does ok, layouting it doesn’t do at all.

The styling as such works fine, declaring font and sizes and colours is just the way it should be, but when it comes to grouping these and making sure the rules apply to the right elements you run in to trouble. As for layouting, there is not much but the possibility of creating hacks.

CSS is a maintainability nightmare

One very common scenario is that you are writing CSS for a website which has a palette of colours used all over the place. Links have the same colour as the masthead background, say, and headers have the same colour as some other kind of element. Almost all websites have, by design, more than one kind of element that has the same colour as another kind. It’s completely unbelievable that CSS has no mechanism to help maintain this. The way CSS is designed even makes it hard to declare such a rule.

A simple and obvious way to enable this would be to allow you to define constants that you could use throughout the style sheet. This is where Alex’ post comes in, because it’s exactly what he suggests. He goes on to talk about what I would like to call mixins; the possibility to include one rule into another to make a composite rule. The inheritance model of CSS is too limited, not very useful, and leads to unnecessary repetition and fragmentation and in the end a maintainability nightmare. I recommend reading his post for a more thorough explanation.

In the past I have, in frustration, implemented both of Alex’ suggestions using PHP, but I do agree that having them in CSS would be preferable. Anything needing a pre-processor to work the way it should is to be looked upon with scepticism.

CSS doesn’t do layouting

There are a number of hacks that can be used to get some basic layouts like two or three columns with one or more of them being flexible, but they are hacks. CSS doesn’t help, but rather hinders layout for the web, and it’s not all the fault of web browsers being incompatible, the problem lies in that CSS doesn’t cut it.

I don’t think CSS should be used for layout at all. There is just nothing there to work with. It’s said that CSS should be used for layout because this separates style and content, but I call shenanigans on that.

First of all style and content is not the whole story; style, layout and content is closer to the truth. Style and layout are not the same thing and to mix them probably only leads to something like CSS.

CSS does style ok, so I don’t mind keeping it for that purpose. Content is what you have in your database, so it’s separated well enough. The problem is the layout. In the current HTML + CSS regime layout falls somewhere in between, some of it is done in CSS (size, margins, padding, for example) and some in HTML (order and structure or hierarchy). The HTML usually also contain magic elements that are needed in order for some CSS to work properly.

My suggestion, for what it’s worth, is to add more layouting mechanisms to HTML and use CSS only for style. Use your favourite server-side technology for inserting the XML-marked-up content in the right place. The CSS can style the XML of the content (setting fonts and colours) and the layout building blocks (adding borders and background colours).

An interesting thing is that there is a totally ok technique for layouting in HTML already. It’s not tables but frames. Frames can be nested and have absolute, percentage-based and relative widths. Just being able to say that one frame should have width="" and another width="2" (making the second take up two thirds of the remaining available space) is quite powerful, much more powerful than anything you can think up in CSS. Sadly frames have so many other shortcomings and problems that they aren’t a real alternative, most of this has to do with each frame being it’s own HTML document and all trouble this causes with scripting, SEO and bookmarkability. It’s the story of web technologies: the good ideas can’t be used, and the bad and broken are the ones that prevail.

There are also a lot to be learned from Flex in this department. Flex does declarative layouting pretty well, and actually does employ the style-layout-content partition too. Flex uses CSS for style, MXML for layout and content is either inline, inserted with scripts or (preferably) kept separate in resource bundles. The content can also contain basic HTML for things like links and other markup.

Closing remarks

The problems mentioned above are not all, CSS has plenty of more, for example the lack of vertical alignment, better selectors (something more like XPath wouldn’t hurt) and referencing. By referencing I mean a way to define a rule that would say that “the point size of this text should be 120% of that text over there”, or “this item should have half the opacity of that one”. CSS inheritance makes this possible to some extent for font size, but not very much else.

Some time ago I bought the book from the makers of CSS Zen Garden in the hope that it would explain to me what all the proponents of CSS layouting were on about. Needless to say I was deeply disappointed. The book is nothing but an endless apology of how CSS doesn’t quite do it the way it should and how to work around that. I would say that that book alone proves that CSS is not capable of doing the task it was designed for.

Just thinking about CSS makes me glad to have left that world behind.

10 Responses to “The Failure of CSS”

  1. GadgetGadget.info - Gadgets on the web » The Failure of CSS Says:

    [...] alex wrote an interesting post today!.Here’s a quick excerptBy way of Ajaxian I came across a post by Alex Russel on the failure of CSS and how CSS 3 just doesn’t solve any real issues. I can’t tell you how glad I am that for my career as a web developer chose Flash and Flex instead of the Ajax … [...]

  2. Chris B Says:

    Interesting read, XPath yes! I find CSS OK, but browser bugs are what has really helped killed it for a lot of people. You have to patient that is for sure. Its not intuitive either, but its early days really. As for you moving away – can’t Flex be styled with CSS, have you really left?

  3. Theo Says:

    Yes, Flex can be styled with CSS, but only styled. I don’t mind that at all, as I mentioned in the article CSS does style ok.

    CSS in Flex is by no means perfect, but it works.

  4. Tom H Says:

    I remember seeing a method using JavaScript for layout, and CSS for styling. I can’t seem to find it though – at the time I dismissed it as a stupid idea, and it probably still is.

  5. Abdulla Says:

    besides the closing remarks and the layouting problems, there are just many many more

    issues like: -Broken box model on IE6 -No explicit grid -Margin Collapsing -Selectors cant ascend

    are a few of many

    good article to read …

  6. Ewout Says:

    Nice article. Wether I agree with it or not.

    But when I take a closer look at the problems mentioned (in the article and in the comments) I’ve come to an other conclusion: it’s not CSS, it’s the lack of support what’s the problem.

    [quote] issues like: -Broken box model on IE6 -No explicit grid -Margin Collapsing -Selectors cant ascend [/quote]

    All the issues mentioned aren’t CSS problems, but IE6 not supporting the standards.

    Nonetheless, what you’ve stated: [quote] First of all style and content is not the whole story; style, layout and content is closer to the truth. Style and layout are not the same thing and to mix them probably only leads to something like CSS.[/quote]

    I agree with that. But when it comes to using frames for layout I have to disagree. When you take a look at the pros and cons of CSS and frames I think CSS suits the best.

    With frames you’ll get content from more than 1 file, presenting it as 1 page. In my opinion that’s not layouting but just merging. If you get what i mean :)

    With CSS3 coming I also think problems will not be solved but just keep growing. When there are still browsers not fully supporting all the CSS standards and stuff, with the new features these problems will grow larger and could kill CSS.

    Happy CSS-ing ;)

  7. Theo Says:

    That selectors can’t ascend is not a support issue, but an issue with the standard, as far as I know. But I didn’t say that. I critizise CSS on a more fundamental level, it just can’t do layout, working box model or not. That people have found ways of doing layout with CSS in another thing, but the solutions aren’t obvious and all of them are hacks, not what CSS was designed for. Constraint based layout with top, left, right, bottom is the closest, but that’s not very easy to work with (and, as with most things in CSS, it doesn’t work in all browsers).

    On the subject of frames, I agree with you and perhaps I should have been more clear on that: I don’t advocate frames as a layout tool, they suck for all the reasons I stated in the article, as well as what you say. However, conceptually they are way better than for layout than anything I’ve seen in CSS.

    What I really would like to see is Flex’ layout components like VBox and HBox or even its constraint based layouting, but in HTML.

  8. Theo Says:

    Come to think of it, you say “it’s not CSS, it’s the lack of support what’s the problem”, that’s part of my point. CSS has failed, much because of the lack of support. Then there are other things too (like not having any tools for layout), but CSS has failed anyway.

  9. Rachel Says:

    All very good points. They have been weighing on my mind lately as I bounce back and forth between Flex and HTML. But as slow as these things move, I feel pretty hopeless that this will change in my lifetime as a web designer.

  10. Fabianv Says:

    CSS is great, my only gripes I have with it is that browsers dont play nice with it all the time. Ever since I started using Flex’s version of Flex the concept of browser compatibility problems flew out of the window :)

Leave a Reply