Simon Willison’s Weblog

A feature request for CSS3

One of the niggles I have with CSS 2 is that I frequently have to define colours multiple times. Consider this blog: I use orange in several places (as a background to the header, a border around the sidebar and a background to the sidebar h3 elements). Should I decide to change the shade of orange, or change it to another colour, I would have to alter my stylesheet in several places.

A nice addition for CSS 3 would be the ability to define “constants” for colours (and maybe for other types as well, although I can’t think of any that need them off the top of my head). It would be extremely convenient to define a bunch of colour constants at the top of a stylesheet and then refer to them elsewhere. For example:

@define {
  colour_1: orange;
  colour_2: navy;
  colour_3: #f00;
}

/* later in the stylesheet ... */

h3 {
  background-color: &colour_1;
}

That way, changing the @define block at the top of the sheet would change the colour of any element referring to a constant. I’m sure there are much better alternatives for the syntax, but the above should at least make the concept clear.

Update: It has been pointed out in the comments that this has been discussed before on the www-style mailing list but rejected for a number of reasons (see this thread). Aah well.