CSS Variables
Software developers hate repetition. Just the idea of seeing some block of code written over and over again when it could be abstracted into a helper function is enough to make our skin crawl and start fights on the internet.
One place where repetition has historically been unavoidable is in CSS, but over the past few years that has been changing. A lot of new tools are being introduced that try to improve our ability to write legible, easy to read CSS. For example, preprocessors like SASS and Less allow for the use of functions and logic in CSS files, but I want to talk about something even simpler: variables.
It’s hard to imagine a more basic step in the simplification of writing and maintaining a CSS file than variables. The addition of variables allows us to create short-hand names for shared values and to change those values globally by changing a single line of code.
Syntax
CSS variables are easy to use and well supported. I guarantee that they will change your life.
- To define a variable we use:
:root {
--variable-name: value;
}- To use the variable we use:
.my-awesome-class {
var(--variable-name)
}CSS Variables and Scope
The documentation for CSS variables says that they should be defined inside the CSS selector that determines their scope. This means you could define a set of variables inside of a class called nav-bar and those variables would only be available inside elements of that class and their children. However, if you want to define variables to be used across your whole document, you can define them in the body selector or using the :root pseudo-selector.
Examples
In the following example, I have defined four color variables:
- wave and aqua have a global scope because they are defined in
:root - red-orange is scoped to the
first-scopeclass. - mellow-yellow is scoped to the
second-scopeclass.
In the HTML document, I have created two divs. The first relates to first-scope and the second relates to second-scope. Inside each div, there is a list which includes three items. The first is styled with a globally scoped variable. The second is styled with a variable scoped to scope-one, and the third is styled with a variable scoped to scope-two.
Looking at the HTML page in the browser, we can see clearly how the variables are affected by the scope that they are defined in.
As we’ve seen, CSS Variables allow you to maintain a single source of truth in your CSS documents and to name key values in a logical way that is easy to read. You can even change the values of the variables using javascript!
I really like using CSS Variables for colors, because it allows me to name them in a way that I can reference more easily than tracking down the hex code or RGB statement from somewhere else in my file, but they can handle much more than just colors.
If you have a value that you are using over and over in a group of items that are related in some way, think about using a variable. By using variables you are making your code easier to maintain. When future-you goes back into the file and needs to update that padding value on all the purple text boxes, you can do so simply by updating the purple-padding variable you created (so brilliantly) when you were writing the CSS. Way to go past-you!
Another interesting thing to note, is that if you redefine a variable within a certain scope it is only redefined in that scope. We can use this to our advantage, let’s say we want to have a light and dark theme for a specific area on our page. We could create a dark class that redefines the color values of the variables and then assign that class to the specific div on a button click. This would cause only that section to change color and leave the rest of the page as it is while still using variable names to maintain the relationships of the styles on our page.
Browser Compatability
Some even better news is that CSS variables are compatible with the current versions of most browsers including Chrome, Firefox, Edge, and Safari. Sadly they don’t work with IE 11, but then what does!
