CSS Variables published as First Public Working Draft

[micheljansen]

Coming from Less.js, the first example does not exactly fill me with joy:

    :root {
      var-header-color: #06c;
    }
    h1 { 
      background-color: var(header-color); 
    }

Compare that to Less:

    @header-color: #06c;    
    h1 { 
      background-color: @header-color;
    }

I can understand why they opted out of the @-notation in favor of something a bit more in line with existing CSS, but it just looks overly complicated to me.

[Kilimanjaro]

Yep, I'd be happy with this:

    $header-color: #06c;    
    h1 { 
        background-color: $header-color;
    }

[wdewind]

Yep, see issue#1 on the proposal:

"As defined here, the syntax for variable usage is different from the syntax for variable definition (i.e. var-foo for definition, var(foo) for usage). Some have suggested that the syntaxes should should match, using functional syntax in both cases. Others have suggested using a prefixed symbol instead of functional syntax (e.g. $foo) for both the property and usage."

[carbon8]

http://www.w3.org/TR/css3-syntax/#at-rules

As I understand it, at-rules are basically directives to the CSS parser and, according to the spec, should be ignored if the parser does not recognize the identifier. Given that, the use of at-rules for variable names has always seemed, IMVHO, to break the purpose of at-rules.

[nthitz]

I can't wait to use them when this is implemented in 2020.

[JoshTriplett]

JavaScript shims will start popping up far sooner than that; those shims can then fall back to native browser support when available.

[InclinedPlane]

Relevant: https://twitter.com/#!/hugsformonsters/status/19015129652174...

[cheald]

This was exactly my first thought, too.

Neat feature. Probably won't be relevant by the time it's approved.

[Zirro]

The issue wouldn't be implementation, that usually happens pretty quickly nowadays. The wait for older versions of browsers to become irrelevant, however, will probably be a long one.

[evoxed]

2027 for IE13 to support it. Perhaps we've learned to hold our breath for too long...

[tagawa]

I'm probably a tiny minority but I don't like that CSS is becoming so bloated with features that overlap fully-fledged programming languages. Yes, it's becoming more powerful but I wonder if some of this is due to an inherent "right, what can we add next?" attitude which takes it further away from its presentational role.

I also mourn the loss of a simplicity that meant that curious teenagers (like myself way back when) could look at a site's code and easily learn from it.

[TazeTSchnitzel]

Well, I'm a curious teenager. Personally, I think source is somewhat easier to understand on modern sites.

The use of CSS and divs instead of tables for layouts has had an interesting side effect: most elements of a page have IDs or classes. This makes it far more obvious what they are there for without having to use a web page inspector.

That said, the continuing expansion of HTML, CSS and JavaScript APIs worries me too, but for a different reason. I'm worried that the stack will become so big that there is no possibility of new rendering engines or browsers.

[lbotos]

I agree with your "what can we add next" qualm, but I'm not feeling that way about variables in CSS. I don't see variables hindering code readability/learnability. As a front-end guy have you ever exclaimed, "Man, I'm glad CSS doesn't have variables!"?

I've done front-end stuff on and off for a few years and I've always thought variables would be the "easiest" thing for implementers to enhance CSS.

[micheljansen]

The key difference here being that rather than looking at whatever bloat they can add this time, CSS variables are actually derived from an acute need in the community. So much, that there are even two CSS preprocessors/frameworks that already add this (SASS and Less).

This lack of variables in CSS is already being solved in a nonstandard way. Might as well standardise a solution.

[mzarate06]

CSS variables don't impact CSS' simplicity. If you need CSS to be simple, its still gonna have that, but when you get around to needing:

css variables, transforms, gradients, border-radius, multiple background images, etc.

... you'll be glad to know that those features are available as well and that you don't have to add complexity to whatever you're building to hack those in. I also don't see how CSS variables, or other recent CSS features, hinder anyone from learning from a site's code.

All these things make it easier to create stuff. My only complaint is that they're not added soon enough.

[mrigor]

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

[gavinlynch]

for posterity's sake, here is the Working Draft version, to go along with the above posted Editor's Draft link:

http://www.w3.org/TR/2012/WD-css-variables-20120410/

[Kilimanjaro]

For those asking why, color replacement is enough to have them implemented. Once your stylesheet grows, you'll have your theme colors scattered all over the place. So having them in one place at the top and making minor changes to the theme is a great time saving feature.

[underwater]

The spec allows the same variable to be defined multiple times, and have cascading determine which value is used.

As far as I can see this completely removes the ability to implement variables in a preprocessor (i.e. serve a style sheet with variables substituted with their values to Internet Explorer). So developers can't use the feature until it's made available on all browsers.

Consider the following code. It can't be translated back into standard CSS without knowing the DOM structure of the document it will be applied to.

    #nav { var-color: red; }
    #side { var-color: blue; }
    body p { color: var(color); }

[etherealG]

I don't understand the use of something like this. Instead of:

.selector-1{a:b;color:red;} ...hundreds of other things... .selector-2{c:d;color:red;}

someone can just:

.selector-1, .selector-2{color:red;} ...hundreds of other things...

It seems to me most cases where variables are used they are needed because of writing bad css in the first place. Use a colour only once and you only need to change it in 1 place, why do you need a variable for that?

[powrtoch]

You seem to go about CSS very differently then most. The typical way of doing styleshets is more or less "What properties does this type of element have? Now what about this type?..." Rather than "Now which elements on my site have this property-value? What about this property-value?..."

Which isn't to say that comma syntax is in any way rare, just that CSS is usually approached by pairing properties to selectors, not the other way around. I would say this helps your style sheet make intuitive sense too. If you want to change the color of the sidebar text, you find the part of your style sheet for #sidebar and then change the color property, rather than finding the section for "blue", removing the sidebar from a big comma separated list of selectors, then placing it into a similar list for "green".

From this standpoint variables make a lot of sense.

[catshirt]

organizing your css by property value sounds like a nightmare. it's much easier to organize hierarchically, which means your colors can scatter.

[pbhjpbhj]

But then when quarter of your red things have one width, and that's the same width as quarter of your green things, and another quarter of the reds have another width, which is the same as quarter of your orange things ... then you need variables again or you end up using multiple classes for each object just so that you can apply multiple properties.

[spullara]

First, I think it is inappropriate to down vote this comment as it is a valid point that you can actually solve the color problem in current CSS.

However, building your CSS in this way probably takes a lot longer to render since the selectors are expensive and setting attributes is cheap. Further, I have never seen a page of any complexity where this would make sense.

[SquareWheel]

Maybe this is a bad practice, but I've just been using PHP inside CSS for quite a while. You may need to tweak your .htaccess to allow PHP in .css files, assuming you're on Apache.

  p {color: <?php echo $mainColor; ?>}

I did some basic testing and it didn't seem to hurt resource usage, but it wasn't a large site or anything.

[wtn]

This guarantees that people will write programs in CSS now. And they will be horrible.