Why CSS really needs variables

CSS does discourage repetition by nature and it's aim is to reduce the amount of repeated styles as possible by using a set of classes and idenitifiers. However, it also could be improved further to make the file size even smaller.

Let's take a look at an example of how a CSS file can become too large:

#outer_panel {
    background : #ddd
}
#main {
    border-radius : 5px
}
#sidebar {
    color : green
}
#outer_panel, #main, #sidebar {
   border : 1px #ddd solid
}

Notice the repitition of the names? So the string #outer_panel, #main, #sidebar is the collection of the three IDs from before. Now keep adding more and more of these IDs and you are greatly increasing the amount of characters in the list, and repeating long IDs. 

CSS already has variables to make a stylesheet easier to update through the use of Sass. These variables increases consistency, allowing you to set a variable for something such as a colour, and reference it, rather than put it in each time, allowing you to simply change the variable to change all instances of the colour. Sass is compiled to standard CSS.

However, variables have yet to be brought to front-end CSS. If a stylesheet was downloaded and parsed on the client's computer and each variable was parsed, I do genuinely believe that it could reduce file sizes of these stylesheets.

Imagine the same CSS but with variables:

$v : 1px #ddd solid;
#outer_panel {
    background : #ddd
    border : $v;
}
#main {
    border-radius : 5px
    border : $v;
}
#sidebar {
    color : green
    border : $v;
}

Now in comparison with the original stylesheet, this example is actually shorter because there is less repitition of the names, which can be longer than using a CSS property. Both have been minified to show the difference in size:

#outer_panel{background:#ddd}#main{border-radius:5px}#sidebar{color:green}#main,#outer_panel,#sidebar{border:1px solid #ddd}
$v:1px #ddd solid;#outer_panel{background:#ddd;border:$v}#main{border-radius:5px;border:$v}#sidebar{color:green;border:$v}

For the sake of comparison, both stylesheets have been minified and put into the one code sample (above). As you can see, the second is marginally shorter. Funny how repetition here is actually the shorter solution, something CSS tries to discourage.

So this is why I think variables would work well in a front-end CSS stylesheet. Of course, this becomes more apparent with larger stylesheets, the above examples were only very slightly different in file size. Of course there is also the other consideration that CSS would need to be processed further by the client's computer, adding more performance concerns (I don't think they'd be huge in this day and age however).

Let me know what you think by commenting below.