After 17 years, CSS gets variables. Finally.

One of my favorite Zed Shaw rants (and believe me, there’s many) is in ‘The Web Will Die When OOP Dies’. In this talk held at a Norwegian technology conference, he unleashed a hilarious, profanity laden diatribe about the current state of web technologies that almost felt as though it was scripted by none other than Malcolm Tucker.

One of the targets for his wrath was CSS and its dumbfounding lack of variables. That’s a totally fair criticism when you think about it. I mean, you could have multiple instances of ‘#FF0000’ throughout a stylesheet. If suddenly the spec changes, or you want to update each of those of those rules, you will have to manually go through your stylesheet (these can be big) and replace each instance of ‘FF0000’ with something else.

If only there was some revolutionary concept where you could store a value and then reference it later. That sounds like crazy talk, right?

… Or, not. That’s called a variable, and they’re found in almost every single programming language ever. Except CSS. Until now.

Firefox 29 Nightly has taken the bold step of introducing CSS variables. Here’s how they work.

Defining, Referencing and Scoping Variables

All variables are prefixed with ‘var’ and are defined within a context. The example given on the Mozilla Hacks blog is of a hex value and a string being defined within the root pseudoclass.

:root {
 var-companyblue: #369; 
 var-lighterblue: powderblue;
}

Simple enough, right?

So, how do you reference them? Again, simple enough. You drop the ‘var-‘ and wrap your variable name in-between a ‘var’ function call with parentheses. Also stolen from the Mozilla Hacks blog.

h1 {
 color: var(companyblue);
}
h2 {
 color: var(lighterblue);
}

Scoping is pretty cool as well. You can re-use the same variable names and just place them within a different selector. This example also shamelessly stolen from Mozilla.

:root {
 var-companyblue: #369;
 var-lighterblue: powderblue;
}
#partnerbadge {
 var-companyblue: #036;
 var-lighterblue: #cfc;
}

Should you have any elements with an ID of partnerbadge which reference the ‘companyblue’ and ‘lighterblue’, they’ll use the second set of values. Nifty, right?

Conclusion

SASS and LESS are two stylesheet languages which compile down to CSS, and have had variables for a really long time. There’s been a huge need for this to be introduced for a good long while now.

However, this is still an experimental technology and is only really supported by Firefox Nightly at the time of writing. It’s not a good idea to start introducing CSS variables into production code right now. In a few months, however… Well, who knows?

Enjoy this blog post? You should follow me on Twitter.

About Matthew Hughes

Matthew Hughes is a software developer, student and freelance writer from Liverpool, England. He is seldom found without a cup of strong black coffee in his hand and absolutely adores his Macbook Pro and his camera. You should follow him at @matthewhughes.

10 comments

  1. I totally agree that it’s about damn time CSS got variables, but I don’t think I would call CSS a programming language. For the same reason I don’t consider HTML a programming language, I don’t think CSS can be called that either. CSS is more of a reference file than programmed instructions.

  2. Great video.

    But… wow. They’ve managed to take a really easy, simple concept like variables, and turn it into an ugly clusterfuck!

    SASS and LESS use “@myConst = @otherConst;” which is a little nonstandard (I’d have gone for $myVar, but that’s just a nitpick). But it’s understandable, and simple.

    But what the hell is “var-myConst = var(otherConst);” about? What do ‘var-’ and ‘var(…)’ mean in this context? “The thing following this symbol is a constant definition”, maybe? And “We don’t have functions but this is a function anyway that returns the value of the constant that is passed as an unquoted string parameter”? WHY? WHY THE HELL? This is even more stupid than the syntax of the earlier proposal, http://disruptive-innovations.com/zoo/cssvariables/

    It also offends me that “var-” is a misnomer: “const-” seems more correct. Because, the point of variables is that they are not just macros what wrap calculated constants; they are things that VARY during the lifetime of execution. Hence the name! If there really was a true variable, like $screenWidth, that’d be drop-dead sexy!

    Do these “variables” even allow constant arithmetic? Are the constants even calculated? If so, then CSS might begin to almost be worthwhile for layout. At the moment, I’d argue it’s almost better to use JS for layout, since CSS can’t even do simple stuff like:

    MyWidth = ScreenWidth – (HisXPosition + HisWidth);

    If it allows that now, then it might mildly reduce the suckage of CSS for its intended purpose (styles). Though the scoping is freaky and, like all CSS stuff, completely not visually intuitive, which makes it bound to be misused badly.

    It might even make CSS mildly less offensive for the thing it should never have been used for: layout, in that instead of arbitrary hardcoded values, you can have things var(PageRightMargin) instead of 237px.

    But I notice that in their examples, they use:

    .partnerbadge {
    var-companyblue: #036;
    var-lighterblue: #cfc;
    }

    …when, in a better system, they would have been able to use:

    $companyblue = #036;
    $lighterblue = $companyblue + #cc6;

    And in a system that’s intelligent enough to grok RGB codes as three separate, capped-between-0×00-and-0xff bytes, you could even do:

    $lighterblue = $companyblue * 2.3;

    If it can’t even do that, then it’s not even a macro.

    At the moment, CSS is AWFUL for layout. It’s a DIABOLICALLY BAD choice. Unfortunately, the W3C considers CSS to be, basically, bytecode. Anything complex, they feel, is outside its remit, and should be done in an external app, so they argue vociferously against even the use of constants in CSS: http://www.w3.org/People/Bos/CSS-variables let alone any of the other stuff that the video suggests should go in there.

    Unfortunately, and this is a large part of why I no longer do web-dev, our available options for layout are all currently broken – as he says in the video, the whole basis of the web is broken.

  3. This is awesome… But a few months? Yeah right. Try ten years. Maybe never. I am afraid this will never get adopted or there will be one straggler. Which puts the entire functionality to waste. Just like the many other specs from 2000 which are just now becoming viable today. I know I sound pessimistic… But this is actually an optimistic realization.

  4. It’s funny how after taking my SQL Expert Training class I actually understand the coding in this blog write up……Matt you have inspired me to blog…not about Tech…but about…:) Keep writing! You need the outlet. Just remember to be responsible.

  5. Oh! And yes,everyone I know, CSS is for creating web pages but it is still a language (in my opinion) vs. retrieving data with SQL.

Leave a Reply