Super Simple Start to css variables

October 28th, 2020 β€” 3 min read

by Harli  Marten
by Harli  Marten
No translations available.Add translation

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:

<html>
  <style>
    :root {
      --color: blue;
    }
    .my-text {
      color: var(--color);
    }
  </style>
  <body>
    <div class="my-text">This will be blue</div>
  </body>
</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:

<html>
  <style>
    .blue-text {
      --color: blue;
    }
    .red-text {
      --color: red;
    }
    .my-text {
      color: var(--color);
    }
  </style>
  <body>
    <div class="blue-text">
      <div class="my-text">This will be blue</div>
    </div>
    <div class="red-text">
      <div class="my-text">This will be red</div>
    </div>
  </body>
</html>

The cascade also applies here:

<html>
  <style>
    .blue-text {
      --color: blue;
    }
    .red-text {
      --color: red;
    }
    .my-text {
      color: var(--color);
    }
  </style>
  <body>
    <div class="blue-text">
      <div class="my-text">This will be blue</div>
      <div class="red-text">
        <div class="my-text">
          This will be red (even though it's within the blue-text div, the
          red-text is more specific).
        </div>
      </div>
    </div>
  </body>
</html>

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

<html>
  <style>
    .blue-text {
      --color: blue;
    }
    .red-text {
      --color: red;
    }
    .my-text {
      color: var(--color);
    }
  </style>
  <body>
    <div class="blue-text">
      <div class="my-text">
        This will be green (because the JS will change the color property)
      </div>
      <div class="red-text">
        <div class="my-text">
          This will be red (even though it's within the blue-text div, the
          red-text is more specific).
        </div>
      </div>
    </div>
    <script>
      const blueTextDiv = document.querySelector('.blue-text')
      blueTextDiv.style.setProperty('--color', 'green')
    </script>
  </body>
</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.

Kent C. Dodds
Written by Kent C. Dodds

Kent C. Dodds is a JavaScript software engineer and teacher. He's Co-Founder and Director of Developer Experience at Remix! Kent'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.

Learn more about Kent

Want to learn more?

Join Kent in a live workshop

If you found this article helpful.

You will love these ones as well.