Intro

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 who are 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 on 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 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 each and 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. For good measure, we also threw in another variable for our top and bottom margin value to keep spacing consistent throughout our design.

See the Pen
Basic CSS Variable by Eric Karkovack (@karks88)
on CodePen.