One of the biggest problems with larger application developments is the maintenance. If you’ve ever worked for a company, or somebody (or have been that somebody yourself), who decides on a whim that the dark blue colour used extensively across your website should really be a light shade of green (yuck!), then you can appreciate how time consuming and troublesome this sort of “simple” change can be.

Find and Replace is a good starting point but can often cause false positives when you use the same hex-coded colour elsewhere and for other attributes. A good starting point to avoid this sort of trouble is to use solidly-founded and well-thought-out structures to your CSS code (after all, this is what Cascading Style Sheets are all about in the first place), but we all know how ungracefully even the most litigiously-developed style sheet can degrade over time, multiple changes and multiple developers.

So, using variables seems to be the most common-sense answer in the same way that reused pieces of code are used throughout the rest of the computing world. Honestly I’m surprised this wasn’t suggested and developed sooner, although a lifetime of developing applications where the majority of users refuse to upgrade from IE5-IE6 makes this sort of oversight a clear expectorate.

Daniel Glazman (from Disruptive Innovations) and Apple’s infamous David Hyatt put together a proposal for consideration as a CSS extension and wouldn’t you know it, it has been adopted by WebKit‘s developers and can now be seen and tested in it’s full glory using their nightly builds.

Under their specifications (and using a late WebKit build), you can now play with variables to your heart’s content:

@variables {
  CorporateLogoBGColor: #fe8d12;
}

div.logoContainer {
  background-color: var(CorporateLogoBGColor);
}

Very clever stuff! Sadly we now have to wait the two-three years it will take for Microsoft to adopt it (for the largest market share of internet browsers), and then at least the same amount of time again for all the older legacy browsers to disappear. It almost makes it not worthwhile but just goes to remind us all of how young and immature CSS really still is as a technology. ..

CSS Variables proposal by D. Glazman & D. Hyatt
WebKit Announcement: WebKit now supports CSS Variables
Grab a WebKit nighly build here
View test cases and examples here