Why doesn't CSS support constants? [closed]

Question

CSS has never supported constants or variables directly. Whenever I'm writing code like this:

span.class1 {
  color: #377fb6;
}

div.class2 {
  border: solid 1px #377fb6; /* Repeated color */
}

I wonder why such a seemingly simple feature has never made it into the standard. What could be hard about implementing a scheme whereby we could avoid repetition, something like this:

$theme_color1: #377fb6;

span.class1 {
  color: $theme_color1;
}

div.class2 {
  border: solid 1px $theme_color1;
}

I know there are workarounds, like using a class for each color or generating CSS code from templates, but my question is: given that CSS is so rich and complex, why weren't CSS constants ever introduced?

Answer 1

Current status [update in Dec 2015]

The W3C issued a draft about CSS variables just one month after this answer has been edited the last time. And this month has brought that draft up to a Candidate Recommendation. It will stay in review at least until June 2016. A test suite is available.

So, all in all, CSS will have variables, also called "custom properties":

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name> production corresponds to this: it’s defined as any valid identifier that starts with two dashes. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.

Example 1

Custom properties define variables, referenced with the var() notation, which can be used for many purposes. For example, a page that consistently uses a small set of colors in its design can store the colors in custom properties and use them with variables:

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

The naming provides a mnemonic for the colors, prevents difficult-to-spot typos in the color codes, and if the theme colors are ever changed, focuses the change on one simple spot (the custom property value) rather than requiring many edits across all stylesheets in the webpage.

Unlike other CSS properties, custom property names are case-sensitive.

This feature is only implemented in Firefox and Chrome at the moment, and it will (probably) take quite some time until it's implemented in current browsers.

Old answer from 2012

This is the original answer from March 2012. It pre-dates both the "official" W3C draft and the experimental browser implementations.

Why aren't CSS variables in CSS 1 or 2?

EDIT: This was already questioned to Håkon Wium Lie, the father of CSS (Opera Watchblog (Wayback machine)):

Bernie Zimmermann: 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?

Hakon: 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 it's not in the standard because they thought it wasn't worth it.

Workarounds

Constants or variables as you have defined are merely placeholders. Since such a placeholder makes only sense if it's used on the same declaration it's useless as grouping already provides this mechanism:

When several selectors share the same declarations, they may be grouped into a comma-separated list.^{CSS2:Grouping}

So instead of using a color in ten selectors, it's often better to collect common declarations and put them together. Instead of

.header{
    color: red;
}
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
    color: red;
}
.footer{
    color: blue;
    border: 1px solid blue;
}

use

/* Color definitions */
.header,
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
    color: red;
}

.footer{
    color: blue;
}

/* border definitions */
.footer{
    border: 1px solid;
}

Also use inheritance whenever possible.

Note that you can declare almost some kind of variable if you're using abstract/simple classes like

.margin5em{
    margin: 5em;
}
.corporateIdentityBackgroundColor{
    background-color: #881200;
}
.corporateIdentityBackgroundImage{
    background-image: url(we/are/awesome/corporation);
}
.backgroundCenter{
    background-position: center center;
}
.backgroundNoRepeat{
    background-repeat: no-repeat;
}

This will enable you to use

<div class="corporateIdentityBackgroundImage backgroundCenter backgroundNoRepeat">Ridiculos long class names</div>
<div class="article">
  <p class="margin5em">Yesterday I found a new hobby: Creating class names that are longer then most common words.</p>
</div>

See also:

• http://icant.co.uk/articles/cssconstants/

Answer 2

Zeta’s answer is quite excellent—it certainly got my upvote—but I wanted to drop a note that a Working Draft for “CSS Variables” (constants with another name) was published just ten days ago:

http://dev.w3.org/csswg/css-variables/

I wouldn’t get too worked up about it as yet, since I suspect it will undergo changes and it’ll be a while before support is widespread. Still, there’s at least some movement in this direction.

Answer 3

why weren't CSS constants ever introduced?

CSS is not a programming language that's why. You could use LESS or SCSS to have variables.

Answer 4

There's an argument for Colour Constants (we have a handful of predefined colour constants already anyway). Variables however lead to If statements, If statements lead to Functions, Functions lead to Javascript (and doobies).

Though this article shows exactly how unnecessary a colour constant is in reality. If you're planning on making a theme colour place all your theme colour declarations in one statement, or as has been mentioned make a class just for your theme colour. The former does require splitting the selector definition however which doesn't smell nice, and the latter does seem extraneous when you already have a class applied to the tag.

I see no need for other Constants in a well designed sheet. Numerous dimensional repetition indicates poor structure/design.