How to use CSS Vars


Beginner guide to CSS Vars

2 May, 2020 · 2 min read

CSS Vars are unique, and you should leverage these where possible. I admit I’m only using them recently, but a tip for any developer is that if you have to re-use code, it’s useless. Write better classes, have it in one stop, etc.

CSS Vars can be a solution here. Let’s look at how these work.

HTML Setup

<div class="section">
  <div class="card card-blue"></div>
<div class="section">
  <div class="card card-red"></div>

And then, for the CSS, we can do the following:

:root {
  --primary-color: #89bbfe;
  --secondary-color: #6f8ab7;
  --card-color: #cae5ff;
  --border-color: #acedff;
  --border-radius: 10px;
  --border-small: 3px;
  --padding-medium: 10px;
  --padding-small: 5px;
section {
  width: 100vw;
  height: 100vh;
  background: var(--primary-color);
  padding: var(--padding-medium);
  display: flex;
  justify-content: center;
  align-items: center;
section:nth-child(even) {
  background: var(--secondary-color);
.card {
  width: 50%;
  height: 50%;
  background: var(--card-color);
  padding: var(--padding-small);
  border-radius: var(--border-radius);
  border-top: var(--border-small) solid var(--border-color);

So the cool part is we declare the :root section where we can make our variables. This can be many things, including colors, paddings, spaces, etc.

In our example, we can even use them inside complicated css statements like the border one: border-top: var(--border-small) solid var(--border-color);. As you can see, we can use two variables without problems here.

Then in our code we use these variables like var({name}). You must replace the {name} with the actual name.

You can see this in action in this Codepen.

See the Pen How to use CSS Vars by Chris Bongers (@rebelchris) on CodePen.

When to use CSS Variables?

That’s a good question. I think it’s essential you don’t re-use code; it’s pretty useless to type the same code over and over, so anything that is re-used, you should make a variable for.

Also, this process makes it easier to change things in one place later.

Let’s say your boss wants to rebrand to red instead of blue, now you have to change your variable, and you’re done!

Browser support

The bad thing about these excellent variables is that Internet Explorer does not support them.

CSS Variables support

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Modifying an SVG path with CSS

10 Dec, 2022 · 2 min read

Modifying an SVG path with CSS

Animate an SVG path with CSS

9 Dec, 2022 · 2 min read

Animate an SVG path with CSS

Join 2099 devs and subscribe to my newsletter