What's wrong with CSS?

.. or is there nothing wrong with CSS?

The article by John Dvorak on the PcMag website about hat's wrong with CSS has stirred up quite a bit of dust. Although, I think the article it self is pretty bad and flawed and lacks arguments and facts supporting its conclusion I feel there must be something that makes people comment with such vigor. Even I did already comment on it. Yeah, guilty as charged.

The comments are getting close to the eternal discussion why one OS is better than the other or why browser X is better than browser Y and why you are completely lost when you still use browser Z. But it still a flow of comments that stay within the normal way of conversation. No flaming yet. But hardly a discussion.

Still, there was some non-understanding flying hither and forth, but also there were some more or less valid points about CSS and what it is not so good at.

Dissecting the critique

When going over the article and the all the comments I rake out the following points.

CSS is good for formatting text

Yes, I do agree. Setting a font type and size is really smooth. You can define that at the top most level in your CSS and all text will be formatted accordingly. Yes, there are differences between browsers and operating systems, but we can live with that.

CSS is good for formatting text and nothing else

No, that is not the case. CSS can be applied to much more than just formatting text. It is quite easy to set background colors and images and define the way links behave when the mouse is hovering over it.

Although, this is really close to formatting text in my opinion. But the next point that was raised put my hair upright.

CSS should not be used for layout

I was never a fan of using table based layouts. To be honest, I missed that part of web design. I made some sites with frames and feel a bit ashamed to admit that. But for the most sites I made I have always hand coded them in a simple text editor and hand coding table based layouts is just short of Chinese Water Torture.

Layout with CSS has many possibilities. There are quite a number of methods to create a page with three columns and a header that looks the same, but has different XHTML and CSS underneath. There are some limitations, but for most of these there are solutions available. Many, many sites offer standard layouts with 2 or 3 columns with or without a footer and cover most of the used layouts that are out on the World Wild Web.

You can try to reinvent the wheel, but you do not need to. Go ahead if you like.

CSS is inconsistent across browsers

Well this is turning things around a bit. The different brands and versions of browsers do not render CSS the same way. A big chunk of CSS is consistent (the "text formatting stuff" mentioned before.) and some is not.

The text formatting stuff works across the board. Hence the perception that it is the only true purpose for CSS. But it also drives the point that when more browsers support the CSS standards it will possible to do more with CSS without all these hacks.

CSS is impossible to maintain

Because of all the necessary hacks and various ways to achieve a layout from almost the same HTML source it can become quite complicated to decipher a CSS file. Especially when multiple files are used and inherentence is (ab)used extensively and NO COMMENTS and no logic et cetera, et cetera, et cetera. Well, then you are talking about a badly put together CSS file. Made by a bad developer. You can best start all over from scratch.

But on the other hand when CSS settings are grouped and comments are used to identify the various sections and the horrible hacks then things become much friendlier.

Also maintaining code created by someone else should also mean that we should be talking about a development process with documentation. And yes, one should document CSS as well as other code used. I know, that would be a perfect world. In practice grouping and commenting code makes life for the ones who come after you a lot easier.

CSS maintenance and redesign are two separate subjects. If maintenance is close to redesigning a site, like completely changing column widths and order and a complete visual overhaul is not something that can be taken lightly. But it can be done.

When only a new widget is added to a website you should best start from finding a widget that more or less resembles what you are aiming for. Try to use the HTML as basis and then add some CSS to style the widget. With a well organized CSS file, things could then be a breeze. But if your CSS file is macaroni then you are in for trouble.

CSS Zen Garden is bad HTML and CSS

The CSS showcase site Css Zen Garden is great. It shows how you can have a site with the same HTML look completely and utterly different by just using another CSS file. Some of the designs are absolutely gorgeous and it is hard to understand that still the same HTML is rendered by your browser.

The Zen Gardener

The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.

And then you look at the HTML. Oops. This looks all over the place. This is not what we call semantic HTML. There are loads of empty <div>s in the code. Why?

What we must remember that Css Zen Garden is a showcase site. It shows what is possible using (clever) CSS. It does not show you best practices of CSS. It does not show best practice in HTML. It's a place for designers and CSS wizards to show what they can do.

I would not call it bad CSS and bad HTML, but it is not the proper way to use it in day to day practice. But it is great to look at what can be achieved with CSS.

There are problems, though

So, reading the following one can say that some time to thoroughly learn CSS and the browser quirks and using best practices in developing CSS, it is possible to use CSS to layout web sites.

However, some problems still exist.

Layout in columns is not in the standard CSS specification yet

Even though there is some support in CSS 3 this is very far from a standard (CSS 2.1 is still in draft) and browser support is (nearly) zero. One has to fall back on the various methods of laying out pages. These usually involve various extra <div>s wrapped around the content to position all the elements.

New CSS properties could potentially fill that gap.

There are hardly any tools

In the old days you could draw a page layout in Photoshop and then export a complete table based layout HTML file and that was that. You had a great looking page. Trying the same thing nowadays and hoping to come up with neatly set up semantic HTML and a separate CSS file that handles the layout of the page is Utopia. I do not foresee any WYSIWYG tool in the near future that can handle all well known CSS patterns, like for instance the Sliding Doors Principle.

HTML and CSS standards are lagging

There has been quite a bit of criticism on the W3C Org lately. One the points is that it takes so long for new standards to be ready. In the fast moving Internet world they are centuries behind the recent developments. Seeing that they are a standards body that have to deliver products for all kinds of machines and software that connect to the web it is quite understandable that it takes a long, long time to finish new standards.

But this slow progress hinders progress of all browsers manufacturers and software and web developers who want to keep improving the products they are delivering.

Conclusion

Yes, there are things not perfect with CSS (and the same goes for (X)HTML), but that does not mean that you should avoid it.

The pros win it from the cons by a long way, even considering it takes time to learn to apply CSS and the lack of good tools.

CSS is here to stay and it will evolve. And as always, evolution is slower than revolution, but it is also a smoother form of progress.

Tags:

• tcss
• tools
• shortcomings