For a long time, the use of variables in CSS was a desired web programmers capacity. Here they are on the horizon in the landscape of the CSS standard (still only a proposal). It will allow a large number of simplifications in the code and eliminate redundancies that plague CSS files.

CSS is an amazing tool but it lacks one important functionality: it cannot contain variables whose values ​​will be evaluated when a page is loaded. Indeed, CSS variables are one of the most requested features, especially by those who are accustomed to using programming languages ​​such as PHP or Javascript.

The "CSS Working Group" (W3C) is becoming closer to defining this highly requested feature [see CSS Variables draft) but it may be not what was expected. For now, we must be content with what we have and take roundabout ways to perform the task.

Currently, large Web documents may contain many CSS statements and many of the values ​​used may be duplicates and repeated many times making modifications to the code a boring and inefficient task.

In the early design of this site, in order to handle the changes made by the user when he uses the selection of color themes, I used a PHP file rather that the usual CSS file to implement a form of CSS-var file replica. This implementation is demonstrated in Using PHP to implement CSS variables. It worked but it is not a CSS solution.

What is coming?

In the document "CSS Custom Properties for Cascading Variables Module Level 1 (Editor’s Draft, 21 August 2014)", W3C introduced the potential for use in future of custom properties that will define the variables and will be accepted by all CSS properties.

It defines a custom property as property whose name starts with "var- " and contains at least one other letter. Property names that have var- as a prefix (e.g. var-name) represent custom properties, contain values that​​ can be reused throughout the document using a variable. Here, a variable is an association between an identifier and a value that can be assigned to CSS properties using the var() function notation. Another thing that the proposal mentions explicitly is setting custom properties to be read by JavaScript.

Here's an example of such a CSS file.

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

It's that simple! Not quite. It's a proposal, not a specification. Already in 2012, Webkit, which is used in Safari and Chrome, worked to implement the CSS variables. According to Scott Gilbertson, the moment when the use of CSS variables will become current is still far away, especially as browsers that do not yet support them, will never support them. They will just ignore them — as a matter of fact, if the text of this paragraph is colored "blue", it's because your browser supports CSS variables.

I have learnt a lot exploring this topic but I will stop here because none of the browsers available on my computer supports these variables. If you want to read further on this topic, read "Playing around with CSS variables - « custom properties »" by Emil Björklund (15 December 2013) as well as "Using CSS variables" on MDN and New Awesomeness: CSS Variables.

Have a good time!