A new draft in the W3C could potentially add something new and pretty interesting. A team of developers (from Google) are working on a way to have data variables in CSS.
Yes, soon we can now name repetitive values like PHP, Java and almost every single programming language in the world.
And every developer has jumped up in joy.
Essentially, what it does is allow properties called “data properties” that let you predefined variables that you have given a name. In order to create a data property, then you’ll need to add this inside an element – for now, we’re going to use the :root pseudoelement:
:root {
data-header-color: #06c;
}
With that declared, I can now use it anywhere in the code by simply calling the variable “header-color”, like so:
h1 {
background-color: data(header-color);
}
It makes things so much easier. But, if you’re looking for ways to do this right now, well there are a couple of ways to sort of do this – but of course, not natively. One way is simply redirect your stylesheet to a PHP file.
You can read the public draft spec on the W3C page.