Here's a quick way to use color constants in CSS

In CSS files of even moderate size it quickly gets complicated to keep track of where a specific color is used. Here I present a way to define your colors as constants at the top of the CSS file and then use those constants in your CSS declarations.

There are some techniques floating around where server side scripting and simple comment lists is used to implement color constants. These techniques either require you to install PHP scripts and modify .htaccess files on the server or they rely on you remembering to search and replace the color values when you change them. What I present here is a technique that works locally on your computer and results in a static CSS file that you then upload to the server as you normally would.

The specific implementation is described in terms of the TextMate editor for Mac OS X, but the general idea could be implemented in any editor with the ability to add extensions.

In TextMate it is possible to create new commands that are specific to the kind of file you are currently editing. Here we create a new command that filters the current file through the M4 macro processor (which comes standard with Mac OS X) and places the output in a file named the same as the current file but with a .css extension.

Create a command in the CSS bundle

This means that the CSS file with the color constants should be named something other than .css; e.g. .mcss as I’ve used here.

The actual command is this:

  cd $TM_DIRECTORY
  echo "changecom('/*', '*/')" \
    | m4 - `basename $TM_FILEPATH` \
    > `basename $TM_FILEPATH .mcss`.css

The command is set to save the current file, take no input and discard the output. I called my command Replace Constants, but you can call it whatever you want. I also set a key equivalent of Command-B (for build) to make it easier to get at.

With this command set up it is possible to create color constants at the top of your (M4-)CSS files.

The way you define color constants looks like this:

Define color constants at the top of your CSS files

And you can then use these constants where you would normally write the color code.

Use the color constants in your CSS declarations

After inserting the color constants in the .mcss file you activate the command and it creates the .css file with the color constants expanded to the color values.

And that’s it! Simple and readable color constants in your CSS files.

This is just a very simple use of the M4 macro processor; one extesion to this technique could be to create a file with color names (e.g. from the X11 or the Pantone color list) in M4 format and include that file in your CSS. That would give you access to a lot of symbolic color names without having to lookup the RGB values. Or you could build a file with all your own favorite color names and their RGB values.

Two things that you should be aware of with this implementation:

Macros in M4 are processed repeatedly and it might therefore be advisable to quote the color names in the definitions. See M4: Defining a macro
When the defines are processed by M4 it leaves behind a blank line, which is then in your CSS file. This could be removed by piping the output from M4 through some other filter to remove repeated blank lines before saving the .css file. I haven’t done this here but it would probably be advisable if you create a lot of color constants as each one gives a blank line.