With web applications increasingly gaining importance and slowly replacing all desktop applications (we all know it to be true, do not fight the future) styling and theming web applications becomes more and more important.
And since they are now supported by all major browsers, CSS variables became an important tool to style websites as well as web apps. In this article I’ll explain what CSS variables are, what their benefits are and how you can use them to style your next web application.
What Are CSS Variables?
As the name suggests, CSS variables are variables you can use in your CSS file to save and reuse values throughout your code. Initially introduced in 2012, they only gained widespread support a few years back.
With CSS variables, or CSS custom properties as they also like to be called, you can save common values in one place and reuse them throughout your style. This way you can simplify your design and make development much easier.
They are a huge leap forward regarding web design and are slowly replacing existing solutions like SASS variables, which can only be used in combination with a SASS compiler.
Advantages of CSS Variables
So why don’t we just use some CSS extension language and compile it to plain CSS? After all, you can do pretty much everything in SASS and simply generate your CSS at compile time.
Turns out CSS variables have a few significant advantages over compile-time extension languages:
1. Native support
they work natively in the browser, which means you can change them at runtime and it will show on the webpage. This makes it much easier to debug applications.
It is also simpler to switch the theme since everything you have to do is just changing the css variables. And tzo be honest, this also is a much more elegant way to theme web applications.
2. They Also Work in Shadow DOM
With modular frameworks like React being more popular than ever, shadow DOM became a common sight. One advantage of this new technology is its encapsulation.
Like with iframes, everything inside only applies to the code inside the subtree of DOM elements, including CSS. This does not apply to CSS variables. They bleed through the shadow DOM and thus you can use them to apply different styles to the same component.
How do CSS Variables Work?
You define a CSS variable by prepending it with a double dash:
pretty simple, eh?
Once defined, you can use the variable with the var() function:
since CSS variables are scoped, they only apply for the element, they were defined in including all children elements. For example, if you had a class named my-custom-button and defined your variable inside that class, you would not be able to use it outside that class:
If you want to use a variable globally, you have to define it inside the :root pseudo-element:
Properties of CSS variables
1. They follow standard cascade rules
As with other CSS properties, CSS variables follow the standard CSS cascade rules. That means the value of a CSS variable will be taken from the closest parent, which has this variable defined. Let's take this example:
The root-button will be red while the inner-container-button element will be green. That is because the inner container button loads the background color variable from its closest parent, the inner-container.
2. They can be used with fallbacks
We can use fallbacks with CSS variables. Basically, everything, that comes after the first comma, will be treated as a fallback, if the variable in question is not defined. In this setup:
We defined three colors but used all of them wrong. The browser will first try to use “ — bg-color-a”. Since this variable is undefined, it will fall back to “ — bg-color-b”, then “ — bg-color-c” and finally, since none of these variables are defined, it will use the color “#326cc2”. This is a pretty good and stable way to avoid serious errors.
That’s about all the magic there is. It may not be much, but with a little imagination, you can do wonders.
A Simple Setup to Get You Going
while CSS variables show potential, they are not very useful if you don’t have a plan on how to use them. One of the best strategies is to use a single file for just the variables definition. In there you can group the variables based on their general purpose.
Since CSS variables can not be nested, naming conventions can help a great deal with keeping track of what the variable is actually used for.
Remember that variables can be used in the calc function. Together, they make a powerful combination. Let’s have a look at a simple setup:
It may not be the prettiest layout out there, but it gets the job done. As you can see, we defined a few variables. We also defined a breakpoint, within which we have overwritten a few of them. This way we were able to implement a basic responsive layout without using any other breakpoints in our code.
This is one of the most basic strategies to use with CSS variables. You can extend it and build a pretty elaborate setup for your next project.
In this short article, we had a look at CSS variables, what they are and how they work. They might not introduce a lot of new options, but can be considered the next big thing in CSS technology.
Some Other Resources
Below you can find some other topics mentioned in this article. Check them out if you want to learn more:
- CSS preprocessor:
CSS Preprocessors: What? Why?…How?!
A lot of entry level developers struggle with CSS, given it’s narrow logic functionality when compared to programming…
2. Shadow DOM:
Understanding the Shadow DOM
As we move forward in 2019, it is quite clear that front end development has become very important. The focus of…
3. The calc function:
Understanding How CSS Calc() Works
The css3 calc() function is a native CSS way to perform simple mathematical operations property values. Being able to…
4. Where can I use CSS variables: