Super Simple Start to css variables

Software Engineer, React Training, Testing JavaScript Training

How to get started using css variables

If you're like me, you're a little late to the game on CSS variables. Maybe you (like me) have been enjoying using real JavaScript variables with CSS-in-JS. But darn it, smart people I know and respect say it's amazing and I should just embrace this relatively newish piece of the platform.

When I'm getting started with something, I really appreciate getting a super simple start to it, so here you go.

I heard "CSS Variables" and "CSS Custom Properties" thrown around a bit in conversation and didn't really understand the difference. Turns out they're the same thing 🤦‍♂️ The technical term is "CSS Custom Properties", but it's often called "CSS Variables".

Ok, so here you go. Your quick-start to custom properties:

1<html>
2  <style>
3    :root {
4      --color: blue;
5    }
6    .my-text {
7      color: var(--color);
8    }
9  </style>
10  <body>
11    <div class="my-text">This will be blue</div>
12  </body>
13</html>

:root is a pseudo-class that matches <html>. Actually, it's exactly the same as if we had used html in place of :root (except it has higher specificity).

Just like everything else in CSS, you can scope your custom properties to sections of the document. So, rather than :root, we could use regular selectors:

1<html>
2  <style>
3    .blue-text {
4      --color: blue;
5    }
6    .red-text {
7      --color: red;
8    }
9    .my-text {
10      color: var(--color);
11    }
12  </style>
13  <body>
14    <div class="blue-text">
15      <div class="my-text">This will be blue</div>
16    </div>
17    <div class="red-text">
18      <div class="my-text">This will be red</div>
19    </div>
20  </body>
21</html>

The cascade also applies here:

1<html>
2  <style>
3    .blue-text {
4      --color: blue;
5    }
6    .red-text {
7      --color: red;
8    }
9    .my-text {
10      color: var(--color);
11    }
12  </style>
13  <body>
14    <div class="blue-text">
15      <div class="my-text">This will be blue</div>
16      <div class="red-text">
17        <div class="my-text">
18          This will be red (even though it's within the blue-text div, the
19          red-text is more specific).
20        </div>
21      </div>
22    </div>
23  </body>
24</html>

And you can even change the custom property value using JavaScript:

1<html>
2  <style>
3    .blue-text {
4      --color: blue;
5    }
6    .red-text {
7      --color: red;
8    }
9    .my-text {
10      color: var(--color);
11    }
12  </style>
13  <body>
14    <div class="blue-text">
15      <div class="my-text">
16        This will be green (because the JS will change the color property)
17      </div>
18      <div class="red-text">
19        <div class="my-text">
20          This will be red (even though it's within the blue-text div, the
21          red-text is more specific).
22        </div>
23      </div>
24    </div>
25    <script>
26      const blueTextDiv = document.querySelector('.blue-text')
27      blueTextDiv.style.setProperty('--color', 'green')
28    </script>
29  </body>
30</html>

So there you go, that's your super simple start. I didn't really talk about why you'd want to do this. I'll let you keep Googling to figure that out (or just let your imagination run wild). Hopefully this helps give you a quick intro to the idea though! Good luck!

P.S. Are you interested in finding out what this is like in React? Check this out: Use CSS Variables instead of React Context.

Super Simple Start to css variables

Get Really Good at React

Write professional React.