Constants in CSS Revisited

Album Cover: White Blood Cells

"Every breath that is in your lungs is a tiny little gift to me."
White Stripes / Dead Leaves and the Dirty Ground

Posted on April 24, 2006 8:42 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.

A couple years ago, I pondered the absence of constants in CSS. I also promised I'd post again if I ever found out why CSS does not support constants. Well, my friends, that day has come.

Earlier this month, Opera Watch began soliciting questions for Håkon Wium Lie, the father of CSS and the Acid2 test (and also the CTO of Opera). Thinking on my feet, I submitted the following:

Håkon, why doesn't CSS support constants? Being able to assign an RGB value to a constant, for instance, could make stylesheet maintenance a lot more manageable. Was it just an oversight?

I've raised this question at my blog but have yet to receive any kind of explanation.

Håkon's answers were posted today, and his answer to my question is as follows:

No, we thought about it. True, it would have saved some typing. However, there are also some downsides. First, the CSS syntax would have been more complex and more programming-like. Second, what would be the scope of the constant? The file? The document? Why? In the end we decided it wasn't worth it.

So there you have it. The real answer to why constants aren't supported in CSS. Guess you couldn't find out from a more authoritative source, right?


Matthew on July 13, 2006 at 2:21 PM:

I don't think the syntax would have to change at all:

@define MY_RGB #903

is virtually identical to

@import url(blah.css) print

As far as scope, why not have it follow the exact same rules as the cascade?

I suppose it does me no good to ask this here, but it's a thought...


Dave on December 22, 2008 at 8:20 AM:

I had a bit of a go with constants recently but from a different angle. I was just messing around really, wondering if it was any use as a kind of constants-pallete.

.darkgrey { color: #444; }
.midgrey { color: #999; }
.lightgrey { color: #DDD; }
.bkgblue { background-color: #04263F; }

Then in the html use multi-class assignment:

<div class="mainpage darkgrey">
Some Text
<div class="innerbox lightgrey bkgblue">
Some more content

It kind of depends on your application of it, but I think it could be quite useful to some.


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.