It's actually very cunning. You don't think about it at first, but you can do some pretty cleaver things with class hierarchies.
Facebook for instance uses the User-Agent HTTP header to set browser specific classes on the body tag. It's not used all the time but it can be used to write browser specific CSS and it's superior to many other altenatives becuase it's just cleaver usage of CSS and you end up grouping browser specific things together with the general CSS rules, promoting a locality in your CSS files. That's important when you need to maintain CSS files over a longer period.
a { color: blue; }
.ie7 a { color: black; }
Becuase how CSS "cascades" the above CSS rule for the anchor tag will be more specific when rendered with Internet Explorer 7. That will through the selector's specificity force the anchor tags to be black in IE7, without hackish and obscure CSS tricks.
As mentioned by others, it can also be used through JavaScript. I find it very useful to use CSS classes as a Boolean flag. e.g. I can use it to create a very simple watermark control.
$('input').focus(function(e) {
var target = $(this);
if (target.hasClass('watermark')) {
target.val('');
target.removeClass('watermark');
}
});
That jQuery snippet will work just fine, but what's more subtle here is that I now have two things. Logic and styling in one shot. Becuase the watermark, used here as a flag, can also be used to apply a specific visual style through CSS, depending on the state of this input. e.g. I might wan't a greyish colored italic font, when the water mark is active.
There are many more examples like this and I do encurage you to experiment more.
