Download 10 Free 
Code repetition is one of the more frustrating aspects of CSS. Having to type out the same property values over and over throughout a stylesheet takes time. And when making changes down the road, it’s too easy to miss a value.
The result is an inconsistent design. Things like colors, animation speed, and element spacing can vary – simply because a designer didn’t catch every instance. Thus, the user experience is thrown out of whack.
CSS variables (a.k.a. Custom Properties) are a great way to combat these issues. Yet, not all designers know about this simple technique. Today, we’ll take you on a quick tour of what they are and what they do. Let’s dig in!
Set a Value Once, Use It All Over
Those familiar with programming languages such as PHP and JavaScript may recognize the term “variable.” A variable sets a value (static or dynamic) that can be retrieved later in a script. For instance, a PHP variable called $user_first_name might be utilized to fetch a logged-in user’s first name to display on a page.
Similarly, CSS variables are there to repeat a value throughout a stylesheet. At the bare minimum, this saves us from typing in a font family or hex color code multiple times.
You may also recognize variables from CSS preprocessors like Sass. There, variables serve essentially the same purpose (although the syntax is indeed different). However, they are not native to CSS. That means the preprocessor has to convert a variable into valid CSS.
CSS variables are a native solution. They’ll save you from having to use a preprocessor unless you really want to. Now, any stylesheet can take advantage of this handy feature.
And you shouldn’t have to worry about browser support – with a caveat. Every modern browser has supported CSS variables for quite some time. But if you’re still targeting Internet Explorer users, a fallback will be required. That is a consideration, but everyone else is good to go.
A Basic Example of a CSS Variable
Color is one of the properties that often gets repeated throughout a stylesheet. For instance, you might use the same color for specific headings, container backgrounds, buttons, and more. Using a CSS variable here makes the task of assigning and changing a value much more efficient.
Let’s use the iconic blue color of Speckyboy as an example. First, we’ll set up a variable in our stylesheet:
:root {
--speckyboy-blue: #4F78A4;
}The variable name, --speckyboy-blue, is set to a hex color code. From there, it’s a matter of calling the variable for every instance where we want to use this pretty shade of blue.
If we wanted to use this as a text color on an element in our stylesheet, the syntax would look like this:
color: var(--speckyboy-blue);The following example shows how the variable can be used in multiple places. We also threw in another variable for our top and bottom margin value to keep spacing consistent throughout our design for good measure.
See the Pen Basic CSS Variable by Eric Karkovack.
Future changes will now be much easier as well. Because of the CSS variables in the above snippet, we now only have to change the hex color of --speckyboy-blue or the pixel value of --vmargin. Those values will cascade down to every instance in our stylesheet.
CSS Variable Resources
Our example only scratches the surface of what is possible with CSS variables. It’s worth digging a little deeper to see how it can be used in more advanced scenarios. The resources below are a great place to learn more:
- A Practical Guide to CSS Variables (Custom Properties) by SitePoint
- Everything you need to know about CSS Variables by freeCodeCamp
- Global and Component Style Settings with CSS Variables by Sara Soueidan
- It’s Time To Start Using CSS Custom Properties by Smashing Magazine
- Logical Operations with CSS Variables by CSS-Tricks
- MDN: Using CSS custom properties (variables) by MDN
- What is the difference between CSS variables and preprocessor variables? by CSS-Tricks
Top