CSS Variables

After getting comfortable with CSS, you can start to explore the more advanced features that make it easier and faster to write. For example, did you know that CSS variables are a thing?

What are CSS Variables?

In computer programming, a variable is a unit that stores an assigned value. Variables are fundamental to all computer programs because they let computers store and manipulate information.

Even though it's not technically a programming language, CSS has its own version of variables. CSS variables, also called custom properties, are a special feature that work a little differently than traditionally written CSS.

Normally when you write a declaration in CSS, you write the property (e.g., background-color) followed by a value (e.g., green). This declaration is assigned to a CSS selector, like so:

div { background-color: green; }

Before CSS variables, this was the only way to write declarations. If you wanted something resembling variables in CSS, you would need to use a preprocessing language like Sass (which is incorporated into CSS frameworks like Bootstrap).

However, CSS variables now provide another way to style page elements without an add-on. CSS variables let us create our own custom values so our code is easier to understand and edit. Let’s unpack how to use them.

Declaring CSS Variables

To use a CSS variable, we first need to declare one. CSS variables can take on any CSS value. For this example, we’ll use color values (represented as hex codes) and font families.

To declare a CSS variable, write it inside a rule set like you would any other CSS declaration. The difference is that the property of a CSS variable always begins with two dashes (--), followed by a name that you assign. For example:

p {

--main-text-color: #FF7A59;

--main-text-font: 'Avenir';

}

Here, I’ve created two custom properties: --main-text-color assigned the hex value #FF7A59 (a nice shade of orange), and --main-text-font assigned the typeface ‘Avenir’.

Note that custom property names are case-sensitive. A CSS variable named --main-text-color will be interpreted as a different variable than --Main-Text-Color. It’s a good idea to avoid capital letters in your CSS variable names to prevent confusion.

How to Use CSS Variables

Up to this point, we’ve only created our variables. We haven’t yet assigned them to any HTML selector, so the CSS variables won’t affect anything on the page.

To apply our CSS variables to HTML, we use the var() function. In programming, a function is a section of code that completes a task. Functions are often indicated by parentheses following the function name.

The job of the var() function is to find a particular CSS variable and apply it to a selector. It is written as follows:

var(--css-variable-name)

... where --css-variable-name is the CSS variable you want to apply.

Continuing with our example, we can apply our CSS variables to a selector like so:

p {

--main-text-color: #FF7A59;

--main-text-font: 'Avenir';

color: var(--main-text-color);

font-family: var(--main-text-font);

}

In this code, we use var() twice. First, var() finds the value of the --main-text-color custom property that we made, then applies this value (#FF7A59) to the color of any text inside a < p > tag.

Next, var() takes the value of --main-text-font and applies this value (‘Avenir’) to the font-family property of text inside all < p > tags.

Fallback Values

Every time you use var(), you must specify a CSS variable inside the parenthesis. You also have the option to write a fallback value, a CSS value that is applied if your CSS variable doesn’t work for some reason, such as a typo somewhere in your CSS, or if the browser is unable to render the value you specify for your variable.

Fallback values are placed within the parenthesis of the var() call after the first argument, the CSS variable name. The two arguments are separated by a comma. A fallback value in our example looks like this:

p {

color: var(--main-text-color, #FF4500); /* #FF4500 is the fallback value */

font-family: var(--main-text-font, 'Helvetica'); /* 'Helvetica' is the fallback value */

}

You can even add multiple fallback values for the same CSS property in case your first fallback doesn’t work. Multiple fallback values are written in a list separated by commas, and are applied in that order:

p {

font-family: var(--main-text-font, 'Helvetica', 'Arial', 'Courier');

}

While optional, a fallback value ensures that some type of styling will be applied in case of an error with your CSS variable.

Why Use CSS Variables?

We’ve learned a lot about how to use CSS variables, but why exactly are they useful? Let's review three key benefits of custom properties: They enable bulk editing, dynamic styling, and better readability.

Bulk Editing

Imagine this scenario: You’ve just finalized the latest draft of your website, and everything looks great. Then your manager shoots you an email. They love the site, but they’ve asked you to change the light purple color of your backgrounds to something a bit more earthy.

That’s no problem. You just need to find a new color, then open up your CSS files and substitute the purple value in one spot, and another spot...and here...oh, and here, almost missed that one...

“Okay,” you say sometime later, “I got them all. Probably.”

In this scenario, you're forced to deal with a drawback of CSS: If you have one style (e.g., a color, font, etc.) that you want to apply throughout your site, you’ll probably need to write it in multiple places in your code, potentially dozens or even hundreds.

But, what if you want to change the rule? In traditional CSS, you would have to change each instance of the rule in the code. Even with a find-and-replace feature, this process is inconvenient, tedious, and prone to errors.

This brings us to perhaps the biggest benefit of CSS variables: They allow you to apply widespread style changes with minimal edits to the code.

Imagine that one of your brand colors, Seafoam Green (represented by the hex code #93E9BE), needs to be applied to backgrounds, text, and icons across your site. With your new knowledge of CSS variables, you can create a custom property for your shade of green:

:root {

--brand-green: #93E9bE;

}

Then, apply this value to your desired elements:

div { /* this can be any element */

color: var(--brand-green);

}

Save time with CSS variables.

Once you’ve mastered the basics of CSS, incorporating CSS variables into your programming vocabulary will save you huge amounts of time. From small tweaks to full-on rebrands, it’s helpful to format your CSS in a way that can be read and modified quickly and smoothly.

Of course, the concepts I’ve explained are just the basics. Feel free to experiment further: Control your variables with JavaScript (here’s a good tutorial to get started), experiment with the calc() function, and see what engaging, high-converting projects you come up with.

Command Palette