Constants in CSS

Album Cover: The Black Album

"Young enough to know the right car to buy yet grown enough not to put rims on it."
Jay-Z / 30 Something

Posted on August 01, 2004 5:40 PM in Web Design
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

I'm going to cut straight to the chase. Why are there no constants in CSS? It makes no sense. One of the most touted benefits of utilizing CSS is savings in bandwidth. When you talk about the big picture (like I have before), adding constants to CSS makes nothing but sense.

Okay, so some of you are wondering what in God's name I'm talking about. Well, if you've done any C++ coding before, you might have run across something like this:

#define ON_A_COP 187

Or in PHP, you might have used something like this:

define("ON_A_COP", "187");

In either case, a constant has been defined that can be referenced throughout the remaining code. By setting up a constant in such a way, you only need to change the actual value in once place (where you defined it) and that change is reflected throughout the code.

So why does this make perfect sense for CSS? Because by defining a constant or constants at the top of your stylesheet (or in a separate one) you can dramatically decrease the size of your .css file.

So given that the benefit of allowing constants in CSS is blatantly obvious, I'll ask again. Why is there no support for constants?

While trying to find the answer a few nights ago, I was amazed at how desolate the web seems to be when it comes to discussions on the topic, even when it boils down to people asking the same question as me. Usenet seems to be the only area where the topic is being discussed at length, and even in those instances it usually boils down to something like:

Q: Is defining constants in my stylesheet possible?

A: Not in CSS. Use some other language to "fake" it.

So, okay, there are workarounds. However, it makes no sense to me that there needs to be. Constants should be available in CSS. Period.

I had no luck finding anything in the specs, and even though I sent an email to Eric Meyer asking him about the lack of support, the chances of him responding are about as good as Cindy Crawford dropping by to play Xbox.

Needless to say, I'll be posting again as soon as I can find any sort of rhyme or reason to the absence of constants in CSS. For now, the issue remains simply mind-boggling.

Update: I did one better than Eric Meyer and actually managed to get the "father of CSS," Håkon Wium Lie, to answer my question. See Constants in CSS Revisited for his reply.


Paulson on January 10, 2005 at 5:23 AM:

Thank you very much for info! I was desperately needing such a thing. Atleast now I know there are no constants in CSS!


yad on February 06, 2005 at 4:11 PM:

Thanks for the straight answer - that's just saved me some time trying to do the impossible. I was especially thinking of a header containing colour constants like:


...and so forth, so that I could tweak my colour scheme co-ordinations.

Only way I can think of achieiving this any sane, manageable way is to develop using the colour constants like Black, Orange, etc. (which are understood by browsers in its default sense). Then when all the development is done and you get to the tweak stage, you spawn off umpteen copies of the current site (in your local filesystem) and make a script which replaces "Black" with "#000000", and "Orange" with "#FFA94F", and so forth, in all relevant files down a (copied) content tree.

This would have the advantage of giving you a history of colour scheme tweaks which you can show to clients (or just for your own reference).

Not sure if this would work. You'd certainly have to watch the script for possible incorrect string replacement.

Anyway. Just my two euros.


Filip on August 13, 2005 at 8:10 AM:

I was just searching the web for CSS constants and found this page :(


Danny Staten on September 22, 2005 at 9:00 AM:

I have primarily been a flash web developer until recent work has put me back into the world of CSS. I too have been wishing for constants in css in a huge way. I also stumbled on this page by searching for css constants.

Unfortunately, the fact that it isn't in the current version of css does mean that when it is implemented, it will then likely be some time before various browsers support it consistently. Grrr. So were they to implement it today, we would likely not be able to use it on anything that will be viewed on multiple browsers (which is about 98% of the web content out there) for at least a year.


Tibet Sprague on December 07, 2005 at 8:57 AM:

This is a frustrating issue, but I do think that using another language to fake it (as mentioned in the article) is a good solution. Not only does this make the use of constants possible, but it offers many other ways to make your stylesheets smaller and cleaner as well. For example you can generate the entire stylesheet dynamically, based on (for example) the browser being used, or the user's preferences, etc. This is all trivial to do using PHP and since almost every hosting company around includes PHP, there's no reason not to try it.


Jim on January 24, 2006 at 12:04 PM:

I agree, constants in some form or another should be added to any new revisions to the CSS spec. Why one cannot define their own version of Blue and then reuse it throughout their style-sheet is entirely a mystery to me.

Since defining classes is already (in a sense) defining a constant, maybe the best solution would be for the spec to allow classes to inherit from or reference other CSS classes. Something like this:

.myBlue { color: #0000DD}
.myText{ font-size: xx-small; .myBlue}

Too bad I can't figure out how to do that with the current spec.


Petit on February 24, 2006 at 3:43 PM:

I completely agree that having constants in the CSS definition makes a lot of sense. I was of course searching the web for an answer and came by your article. As others here I'd like to reuse colors by defining named colors in the CSS head. The advantage of such an arrangement would be able to first set colors on all kinds of objects in a web document, using names rather than values, and then have the possibility to change the color palette in one place. This sounds very much like the essential idea of changing the look and feel of a whole web site by replacing one stylesheet with another. It strikes you as remarkable that it's not already there.
Someone argued that CSS is all about style, and that constants belong in a programming context. Well, as mentioned above, CSS already has constant values such as black, red and blue for colors. The are predefined and what we want is the facility of user defined constants.
It's about time that we get them.


gabrielg on March 30, 2006 at 7:18 PM:

I'm also looking for options on emulating constants. In addition to colors, they'd be helpful for units of measurement. For example, when you have elements positioned based on the dimensions of a graphic (the logo, w/o mixing in actual content). Using a dynamically parsed pseudo-cs3 sheet seems a good way to go - either dynamically, or compile them into normal css on the server when needed.

Times like this, I start missing the C preprocessor...


dofollow blog comments service on September 30, 2016 at 5:17 AM:

Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place..


Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.


Email Address:



Check this box if you hate spam.