CSS isn’t dead

CSS has been getting some flak lately: accused of being an ineffective technology, some are suggesting it should be remodelled or replaced entirely.

Some of the recent arguments against CSS are:

• You always have to add excessive markup ‘cruft’ to get the job done
• Selectors can’t target ancestors or previous siblings (as you can in JavaScript)
• It’s an ineffective tool for laying out pages

You always have to add excessive markup ‘cruft’ to get the job done

The problem at the root of this complaint is more to do with bad browser CSS implementations than with CSS itself; basically, web authors have been using a crippled subset of CSS for so long that most have forgotten, or never learned how to use a more complete implementation. IE6, dominating the browser market for such a long time, has meant developers have had no choice but to avoid using child selectors, adjacent sibling selectors, attribute selectors and class chaining. But the potential in these ‘missing parts’ is enormous when you take advantage of them.

Child selectors alone greatly decrease the need for markup cruft, and make stylesheet declarations more compact, precise and expressive.

Attribute selectors can be used to target attribute prefixes e.g div[class^="column-"] would target div elements that have a class-name beginning with ‘column-’.You could apply styles to all your column-n classed elements without having to add extra styling hooks. Other uses include regular attribute targeting, which saves us having to add more markup e.g. input[type="text"].

Class chaining enables us to create more sophisticated inheritance patterns in our code, again saving us time and markup while making our stylesheets more intelligent.

That’s just the simple stuff, currently supported in all non-IE6 browsers. CSS still has much more:

• Generated content
• CSS3 selectors nth-child etc.
• :not(.foo)
• :first-child / :last-child

This makes a pretty powerful toolset; all we need is browsers that support these standards.

Selectors can’t target ancestors or previous siblings

Given the power of CSS selectors, if you need to select nodes in all directions, you’re probably doing something wrong. CSS works pretty hard to display the page in response to every mouse event and actions that cause page re-flow, so I expect the limitation is largely due to performance, which is pretty reasonable.

It’s an ineffective tool for laying out pages

For me, this argument is the only one that holds some weight. But again, with browsers that implement the standards correctly, CSS layout isn’t that hard, just a little awkward sometimes.

To wrap up

I still think CSS is ok, it’s outdated browsers that are the problem. What I’d like to know is how to get users and IT departments to upgrade more often :)