It appears that CSS 3 will be the final iteration of the language. Undoubtedly, there’s some cool layout stuff in there along with everyone’s favorite tricks like rounded corners and opacity. However, I’m pretty dismayed if this is the end of CSS because I think there’s a very important concept still missing: variables.

I, like many designers, find myself using the same colors in multiple places throughout a style sheet. Consider:

div.container {
    background-color: #123456;
}

div.outer a {
    color: #123456;
}

These two rules each use the same color, but in different ways. This means that the rules can’t be combined for simplicity. The fact that they both use the same color is irrelevant as far as CSS is concerned; there is no relation between these two rules. I say this is ridiculous. The next time I want to change the style on this page, I need to manually search and replace each instance of this color. Okay, maybe I’m going a little overboard, you can use the replace functionality of any basic text editor to do it but the issue I’m looking at here is the relationship between these two rules.

If CSS had some support for variables, style rules could be given some greater semantic value aside from listing out explicit details. Consider if the following code was possible:

@define {
    $highlight_color: #123456;
}

div.container {
    background-color: $highlight_color;
}

div.outer a {
    color: $highlight_color;
}

With this code, you can tell how each rule relates to the overall page style. This approach can be done using server-side languages, intermixing variables with CSS…but that creates a layer of complexity that I’m not sure is necessary for most sites. The simple fact is that I want to be able to define colors (and fonts, and other information) as relevant parts of my page’s look and feel, not simply hex numbers or other measurements that don’t speak to me. Am I the only one who thinks this could be a great addition to our toolkit?