
CSS Variables published as First Public Working Draft - tilt
http://lists.w3.org/Archives/Public/www-style/2012Apr/0227.html
======
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;
        }

~~~
Kilimanjaro
Or even this:

    
    
        :vars {
            header-color: #06c;
            header-font: helvetica;
        }
        h1 { 
            font-family: $header-font;
            background-color: $header-color; 
        }

~~~
pbhjpbhj
@, : and $ are already well used though.

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

~~~
cheald
This was exactly my first thought, too.

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

~~~
Zirro
The browser-makers seem to have grown tired of the approval-process.
Implementation happens before that.

------
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.

~~~
tagawa
Good points. I hadn't thought about the increased barrier to entry for new
rendering engines but you're quite right.

------
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?

~~~
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.

