Admittedly, it's possible I'm missing something, but the talk about CSS variables/constants online sort of confuses me. I can see the utility they'd offer, but I kind of side with Bert Bos on a lot of his points about the trade-offs involved.
I've totally been there, trying to find the salmon color used in the header links on version 0.42 of a site that's grown to encompass ten different stylesheets, unable to accurately pick the color from the image in the third-hand PDF, wishing it just had a simple name defined in the base stylesheet. However, at some point trying to remember the variable name is going to be only slightly easier than remembering the hex color. Moreover, you save no code. You're just substituting one string for another, you're redefining whatever you're going to redefine, the fundamental processes we struggle with now become no simpler.
I'd like to see some sort of CSS micro-style instead of variables. I think this would answer a few of the points I've heard raised against variables, and would also save code and be more useful. I'm talking about extending the concept of inheritance so that we can invoke it programmatically instead of having to rely on an element's position within the document. (Maybe something like this already exists. Maybe I'm an idiot. This is always possible, especially since this seems to me like the obvious thing to do.)
What I'm talking about is something like so:
// here's the variable
$specialNote { font-size: 12px; color: #333; padding: 5px; background-color: #eee; border: 1px solid #ccc; }
// here's its basic implementation
($specialNote) #mainContent p.specialNote { font-size: inherit; }
// here it's used somewhere completely unrelated, and we add only what differs
($specialNote) #rightSide dl.specialList dd span.specialNote { display: inline-block; }
I think that would be really cool.