The plan for this article is to show you how native CSS variables work, and how you can use them to make your life a bit easier. As your web apps grow bigger, the CSS becomes big, redundant and many times messy. Used within a good context, the CSS variables, give you the mechanism to reuse and easily change repeatedly occurring CSS properties.
Before “the pure” CSS supporting variables, we had pre-processors like Less and Sass. But they required compiling before use, thus (sometimes), adding an extra layer of complexity.
How to define and use CSS Variables (also known as custom properties)
Let me start with something you may already be familiar with: using vars in JavaScript.
To declare a simple JavaScript var you will write something like this:
let myColor = "green";
To declare a CSS variable you will have to add a double dash before the name of that var.
body {
--english-green-color: #1B4D3E;
}
Now, in order to use the value of the CSS variable, we can use the var(...) function.
.my-green-component{
background-color: var(--english-green-color);
}
The easiest way to manage your CSS vars is by declaring them into the :root pseudo-class. Given the fact that the CSS variables follow the rules like any other CSS definition, having them in the :root will ensure that all selectors will gain access to these variables.
:root{
--english-green-color: #1B4D3E;
}
Browser support for CSS variables ?
Browser support for CSS variables isn’t bad at all. If you take a look at Can I Use CSS Variables then you will see that all major browsers are supporting CSS vars out of the box. Both on mobile or desktop.
Just be careful to provide a fallback if many of your users are (still) using IE.
Let’s build stuff!
Now, let's see these CSS variables in action:
Example 1 - managing colors
By far one of the best candidates for using CSS variables are the colors of your design. Instead of copy-and-pasting the same colors over and over again, we can just place them in variables.
If somebody is asking us to update a specific shade of green or make all of the buttons red instead of blue then just change the value of that CSS variable, and that's it. You won’t have to search and replace all of the occurrences of that color.
Example 2 - removing duplicate code
Often you need to build a few different variants of components. Same base styles, just slightly different. Let's use a case with some buttons that are different in color.
The typical solution will be to create a base class, say .btn and add the variant classes.
.btn {
border: 2px solid black;
// more props here
}
.btn:hover {
background: black;
// more props here
}
.btn.red {
border-color: red
}
.btn.red:hover {
background: red
}
And now use them like this:
<button class="btn">Hello</button>
<button class="btn red">Hello</button>
However, this will add some code duplication. On the .red variant we have to set both the border-color and the background to red.
This can be easily fixed with a CSS variable.
.btn {
border: 2px solid var(--color, black);
}
.btn:hover {
background: var(--color, black);
}
.btn.red {
--color: red
}
Example 3 - making some properties human readable
CSS vars are great to use if we want to create a shortcut to a more complex property value, so that we don't have to remember it.
CSS properties, like box-shadow, transform and font or other CSS rules with multiple parameters are perfect examples.
We can place the property in a variable so that we can reuse it via a more human readable format.
Example 4 - cascading the variables
The standard cascade rules also apply to the CSS Variables.
So, if a custom property is declared multiple times, the lowermost definition in the css file overwrites the ones above it.
The following example demonstrates how easy it is to dynamically manipulate properties on user action, while still keeping the code clear and concise.
Example 5 - Theme switcher with CSS Variables
A great thing about CSS variables is their reactive nature. As soon as we update them, whatever property has the value of the CSS variable gets updated as well. So, with just a few lines of Javascript and the smart use of CSS Variables, we can make a theme switcher mechanism.
Bonus tips for CSS Variables
Like almost all the things in CSS, the variables are also pretty straightforward and easy to use. Here are a few more tips that are not included in the examples, but are still very useful in certain situations:
-
mind your capitalization; CSS variables are case sensitive
:root {
--color: blue;
--COLOR: red;
}
/*--color and --COLOR are two different variables*/
-
when you use the var() function you can send a second parameter. This value will be used if the custom property it's not found:
width: var(--custom-width, 33%);
-
you can use CSS variables directly into HTML
<!--HTML-->
<html style="--size: 600px">
body {
max-width: var(--size)
}
-
You can use a CSS variable within other CSS var:
--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);
-
CSS variables can be made conditional with media queries. For example, the following code changes the value of the padding, based on the screen size:
:root {
--padding: 15px
}
@media screen and (min-width: 750px) {
--padding: 30px
}
-
Don't be afraid to use CSS variables with the calc() function.
--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);
CSS variables aren't a silver bullet. They will not fix every problem you have in the CSS realm. However, you can quickly tell they make your code more readable and maintainable.
Also, they greatly improve the ease of change across large documents. Just set all your constants in a separate file, and you won’t have to jump through thousands of lines of code when you just want to make a change to a variable.
So, what are you waiting for? Give CSS variables a try and let me know what you think.
