CSS: ur doin it wrong.

So I'm over on codinghorror reading a blog by one of the Stack Overflow guys about how CSS is super limited. Jeff hits us with a couple examples of how CSS falls short and then goes on to explore a couple Ruby gems that supposedly shine up the giant turds that are cascading stylesheets.

Jeff's 3 problems with CSS are:

  1. Vertical alignment is a giant, hacky PITA.
  2. Lack of variables so we have to repeat colors all over the place.
  3. Lack of nesting so we have to repeat huge blocks of CSS all over the place.

Let's take these one at a time.
Vertical alignment is a giant, hacky PITA.
Ok, this is true. God help you if you want to align something vertically.

Lack of variables so we have to repeat colors all over the place.
The solution he shows are these ridiculous things like Less CSS. Dude, you're doing it wrong. This demonstrates a fundamental misunderstanding of inheritance and subclassing. His example about repeating colors:

.content_navigation {
border-color: #3bbfce;
color: #2aaebd;
}

.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

is silly because he's going to have to keep repeating those colors everywhere. And heaven help him if he wants to lighten the border color a shade cross-site. Instead, he should do this:

.blue-border {
border-color: #3bbfce;
}

.aqua {
color: #2aaebd
}

.padded-border-margin {
padding: 8px;
margin: 8px;
}

and drop the appropriate classes on his divs.

Lack of nesting so we have to repeat huge blocks of CSS all over the place.
Oddly, his solution is actually longer than the corresponding CSS example:

#header {
-moz-border-radius: 5;
-webkit-border-radius: 5;
border-radius: 5;
}

#footer {
-moz-border-radius: 10;
-webkit-border-radius: 10;
border-radius: 10;
}

Well first off, don't blame css for border-radius. If browsers were doing as they "should" and using strict CSS2, these should do nothing anyway. Really what you should be doing is using subclassing and inheritence like this:

.five-px-border {
-moz-border-radius: 5;
-webkit-border-radius: 5;
border-radius: 5;
}

.ten-px-border {
-moz-border-radius: 10;
-webkit-border-radius: 10;
border-radius: 10;
}

and giving your header and footer the corresponding classes. That's because chances are the header and footer aren't the only place you're going to use the rounded corners.

Anyway, I need to get back to work so that's as deep as I'll go for now. But am I crazy? Does Jeff really have a point, or does my response seem so obvious to me because I'm lightyears behind?