CSS Variables: Why They Matter
If you’re reading this, you most likely already know what CSS preprocessors are and why they are used. A modern website usually has tons and tons of CSS, and preprocessors like SASS and LESS make writing scalable and modular styles much easier and simpler. In fact, one could argue that a major reason why developers use CSS preprocessors at all is because of how easy it is to change a single variable and have that change reflected across the entire application.
Using find and replace is a dangerous approach that only gets more dangerous the larger the code base is, and you would have to do that every single time. Of course, with CSS preprocessors, you can just make the change in one place and avoid the need to do this.
Enter CSS Variables
CSS variables is the native approach to addressing this issue. Instead of repeating the same values over and over again, you can define a CSS variable, give it a value, and then use it wherever you want.
Naturally, you might think to yourself “Okay, but if I can already do essentially the same thing with my current CSS preprocessor, why should I bother?”. Well, there is still a really important benefit that you would be overlooking. Since they are variables and not simply values, they offer semantic value, because the variables are named whereas a value is just that, a value.
How do I use CSS variables?
Before I show you how to use CSS variables, it might prove useful to take a look at how the same issue is tackled using plain CSS, then with CSS preprocessors.
Let’s say for simplicity’s sake you want two different elements to have the same text color. Using plain CSS, it might look like this:
h1 {
color: #333;
}p {
color: #333;
}
Like I said before, you just have to repeat the value. Now this is the same issue resolved using SASS or LESS:
$main-text-color: #333;h1 {
color: $main-text-color;
}p {
color: $main-text-color;
}
That’s obviously better than the first because you can at least read the variable name, however this is still not quite as good as with CSS variables.
Here is how it is done using CSS variables:
:root {
--main-text-color: #333;
}h1 {
color: var(--main-text-color);
}p {
color: var(--main-text-color);
}
Right away you can notice that the syntax is pretty straightforward. To declare a variable, you start off with two dashes, followed by the name of the variable itself, then the value.
When it comes time to use the variable, you just wrap var() around the variable and you’re good to go.
Integration with JavaScript
Another really cool feature of CSS variables is that they are directly integrated with JavaScript. For example, you can set the value of a CSS variable using existing values in the same JavaScript scope, like so:
var element = getElementById(“id”);
var styles = getComputedStyle(element);//gets the variable
var value = getVariable(styles, ‘--body-width’);//sets the variable
setDocumentVariable(‘--body-width’, value);
This feature alone opens up a whole new world of possibilities because it takes advantage of one of the biggest downsides of CSS preprocessors; the output is static and cannot be changed at runtime.
Because CSS variables can change at runtime using JavaScript, you can now have dynamic styling, where you simply change the value once and let the browser take care of styling the rest.
You cannot change a variable after SASS/LESS has compiled down to plain CSS, you are stuck with the value that it resolved to. With CSS variables, that is no longer the case.
Takeaway
Will CSS variables kill CSS preprocessors? Not a chance; at least not yet.
They only address one of the major reasons why people use SASS and LESS, but they’re not nearly enough. Plain CSS still does not support nesting, for example, and that alone is definitely enough to keep people using a CSS preprocessor.
Not only that but, CSS variables is still an experimental technology that is only supported in modern browsers, and with the finalized specs still in flux, this could easily change in the future.
CSS preprocessors are still far away from being rendered useless, but keep an eye out as CSS evolves in the future, the direction CSS takes might surprise you.
Resources:
Using CSS Variables on Sabe.io
