Why You Should Be Excited About Native CSS Variables

With CSS Variables now being under development for Edge (the last of the modern browsers to not support it yet) it’s time to dig up this brilliant post on CSS Variables. If you’re under the impression that CSS Variables offer nothing new when compared to Preprocessor variables, then this post is a must-read for you:

CSS preprocessors are fantastic tools, but their variables are static and lexically scoped. Native CSS variables, on the other hand, are an entirely different kind of variable: they’re dynamic, and they’re scoped to the DOM. In fact, I think it’s confusing to call them variables at all. They’re actually CSS properties, which gives them an entirely different set of capabilities and allows them to solve an entirely different set of problems.

The article first goes into detail on Preprocessor Variables and then switches over to CSS Variables, highlighting the differences and use cases where Preprocessor Variables fall short.

Say you want to style a button differenlty when it appears inside a header. Easy-peasy with CSS Variables:

.Button {
  background: var(--Button-backgroundColor, #eee);
  border: 1px solid var(--Button-borderColor, #333);
  color: var(--Button-color, #333);
  /* ... */

.Header {
  --Button-backgroundColor: purple;
  --Button-borderColor: transparent;
  --Button-color: white;

Philip Walton: Why I’m Excited About Native CSS Variables →

Not entirely familiar with CSS Variables? CSS Variables: var(–subtitle); is a good video/presentation to get you started.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation


Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.