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.
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.