Variables

You have written (or studied) a lot of CSS by now. And you might have noticed an annoying issue: a lot of repetition. A copy-pasting of the same values, usually for colors or sizes.

Maybe you have a color scheme for your website, which means the same ~5 colors are used for all elements. You have no choice but to repeat them everywhere. And what if the color scheme changes? Then you have to change these values everywhere.

Surely, there’s a better way, right?

There is: CSS Variables.

What are variables?

If you’ve ever done any programming, you know the general idea. I, however, still recommend you read this chapter, as CSS does things slightly differently.

A variable is a piece of data saved under a name invented by you. Instead of copy-pasting the actual data, you can just use that name throughout your stylesheet.

In other words, I can save a color under the name “highlight-color”. Then I reuse that name in my stylesheet, whenever I need that color. And if it ever changes? I only need to change that one variable in one place!

Declaring variables

Variables in CSS can be global (accessible everywhere) or local (only available in one specific element).

In both cases, the syntax for …

• Creating a variable is --varname: value
• Using a variable is var(--varname)

Global

To declare global variables, you use :root pseudo-class (selector) and put the variables beween its brackets.

Now, I can simply use those variables anywhere in the stylesheet.

Pretty powerful, right? I can declare common data (such as color scheme and fonts) as global variables, then use those for clean CSS.

Local

You can actually declare variables in any selector. But when you do so, it becomes a local variable. It’s only available within the same selector.

There’s another common, practical use case that I want to highlight here.

Often, you have one-off elements. Elements that just need a slightly different styling, or maybe a custom styling that the users of your website can enable. (This is common on websites that allow creating custom user or home pages, which you can style yourself.)

You don’t want to create a thousand tiny classes for all the options.

Instead, you can use local variables from the HTML.

• You declare the CSS variable on the element itself with the style attribute.
• Then use those variables in your stylesheet!

Conclusion

CSS variables are an amazing tool to keep your CSS clean and efficient. Try to use them as much as possible.

Even when uncertain if you’re going to repeat some piece of data, I’d always opt for turning it into a variable anyway. More often than not, you end up thanking yourself for that down the line.