This site runs best with JavaScript enabled.

Super Simple Start to css variables

Photo by Harli Marten


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.

Discuss on TwitterEdit post on GitHub

Share article
EpicReact.Dev

Get Really Good at React

Get yourself the most comprehensive guide to React for professional developers in the universe.

Blast Off

Write professional React.

Kent C. Dodds

Kent C. Dodds is a JavaScript software engineer and teacher. He's taught hundreds of thousands of people how to make the world a better place with quality software development tools and practices. He lives with his wife and four kids in Utah.

Join the Newsletter



Kent C. Dodds