CSS Variables (officially known as custom properties) are user defined values that can be set once and used many times throughout your codebase. They make it easier to manage colors, fonts, size, and animation values, and ensure consistency across web applications.

For example, you can set a brand color as a CSS property ( –primarycolor: #7232FA) and use this value in any components or style that uses your brand color (background: var(–primarycolor);).

Besides offering cleaner and non-repetitive code, CSS variables can be used to build color palettes, improve responsiveness, and create dynamic type systems.

This post is extracted from my guide, CSS Master, which teach you to write better, more efficient CSS. You’ll also learn to master tools that will improve your workflow and build better applications.

Defining a CSS Variable

To define a custom property, select a name and prefix it with two hyphens. Any alphanumeric character can be part of the name. Hyphen (-) and underscore (_) characters are also allowed. A broad range of Unicode characters can be part of a custom property name. This includes emoji, but for the sake of clarity and readability, stick to alphanumeric names.

Here’s an example:

–primarycolor: #0ad0f9ff;

The — indicates to the CSS parser that this is a custom property. When used as a variable, the parsing engine replaces the property with its value.

Custom property names are case-sensitive. That means –primaryColor and –primarycolor are considered two distinct property names. That’s a departure from traditional CSS, in which property and value case don’t matter. It is, however, consistent with the rules for variable names in ECMAScript.

As with other properties, such as display or font, CSS custom properties must be defined within a declaration block. One common pattern is to define custom properties using the :root pseudo-element as a selector:

:root { –primarycolor: #0ad0f9ff; }

:root is a pseudo-element that refers to the root element of the document. For HTML documents, that’s the  element. For SVG documents, it’s the 

Using a CSS Variable

To use a custom property as a variable, we need to use the var() function. For instance, if we wanted to use our –primarycolor custom property as a background color, we’d do the following:

body { background-color: var(–primarycolor); }

Our custom property’s value will become the computed value of the background-color property.

To date, custom properties can only be used as variables to set values for standard CSS properties. You can’t, for example, store a property name as a variable and then reuse it. The following CSS won’t work:

:root { –top-border: border-top; var(–top-border): 10px solid #bc84d8; }

You also can’t store a property–value pair as a variable and reuse it. The following example is also invalid:

:root { –text-color: ‘color: orange’; } body { var(–text-color); }

Lastly, you can’t concatenate a variable as part of a value string:

:root { –base-font-size: 10; } body { font: var(–base-font-size)px / 1.25 sans-serif; }

CSS Custom Property vs. CSS Variable

“Custom property” is a future-proof name that accounts for how this feature might be used someday. This could change, however, should the CSS Extensions specification be implemented by browser vendors. That specification defines ways to extend CSS with custom selector combinations, functions, and at-rules.

We commonly call custom properties “variables”, and to date, that’s the only way we can use them. In theory, they’re not entirely interchangeable terms. In practice and for now, they are. I’ll mostly use custom properties in this post, since that’s their proper name. I’ll use variables when it makes the sentence clearer.

Setting a Fallback Value

The var() function accepts up to two arguments. The first argument should be a custom property name. The second argument is optional, but must be a declaration value. This declaration value functions as a fallback or default value that’s applied when the custom property value isn’t defined.

Let’s take the following CSS:

.btn__call-to-action { background: var(–accent-color, deepskyblue); }

If –accent-color is defined—let’s say its value is #f30 —then the fill color for any path with a .btn__call-to-action class attribute will have a red-orange fill. If it’s not defined, the fill will be a deep sky blue.

Declaration values can also be nested. In other words, you can use a variable as the fallback value for the var function:

body { background-color: var(–books-bg, var(–arts-bg)); }

In the CSS above, if –books-bg is defined, the background color will be set to the value of the –books-bg property. If not, the background color will instead be whatever value was assigned to –arts-bg. If neither of those are defined, the background color will be the initial value for the property—in this case, transparent.

Something similar happens when a custom property has a value that’s invalid for the property it’s used with. Consider the following CSS:

:root { –text-primary: #600; –footer-link-hover: #0cg; } body { color: var(–text-primary); } a:link { color: blue; } a:hover { color: red; } footer a:hover { color: var(–footer-link-hover); }

In this case, the value of the –footer-link-hover property is not a valid color. Instead, footer a:hover inherits its color from that of the  element.

Custom properties are resolved in the same way other CSS values are resolved. If the value is invalid or undefined, the CSS parser will use the inherited value if the property is inheritable (such as color or font), and the initial value if it’s not (as with background-color).

Cascading Values

Custom properties also adhere to the rules of the cascade. Their values can be overridden by subsequent rules:

:root { –text-color: #190736; } body { –text-color: #333; } body { color: var(–text-color); }

In the example above, our body text would be dark gray. We can also reset values on a per-selector basis. Let’s add a couple more rules to this CSS:

:root { –text-color: #190736; } body { –text-color: #333; } p { –text-color: #f60; } body { color: var(–text-color); } p { color: var(–text-color) }

In this case, any text that’s wrapped in 

 element tags would be orange. But text within 

This site uses Akismet to reduce spam. Learn how your comment data is processed.