DEV Community

Cover image for Don't miss out on css variables
Tim Deschryver
Tim Deschryver

Posted on • Edited on • Originally published at timdeschryver.dev

Don't miss out on css variables

#webdev #css #javascript #devtips

At first when I heard of css variables when it was introduced, I was a bit skeptical. Why would anyone use it if there are extension languages as scss, sass, less and stylus. After several years, I started to notice more and more peoples using it, writing about it and talking about it. I was missing out on something... It took a while but after using it here and there, I was hooked. In this post I'll cover what convinced me to explore css variables further and to start using them in projects.

Usage

To declare variables, define them in a selector and prefix the variable names with two dashes (--):

div {
  --bgColor: deeppink;
}
Enter fullscreen mode Exit fullscreen mode

A popular approach is to define variables with the :root selector, this way you're defining a global variable:

:root {
  --bgColor: teal;
}
Enter fullscreen mode Exit fullscreen mode

To use the variables, use the var() function:

div {
  background: var(--bgColor);
}
Enter fullscreen mode Exit fullscreen mode

The var() function accepts a second parameter, which is used as a fallback if the variable has not been declared:

header {
  background: var(--bgColor);
  color: var(--color, beige);
}
Enter fullscreen mode Exit fullscreen mode

The snippets above results in:

Image showing the results of the code snippets

Themes

With css variables, creating a theme becomes simple.

Depending on the body's class we can set the variable to its appropriate value:

body.sunrise {
  --background-color: #fff;
  --text-color: #333;
}

body.sunset {
  --background-color: #333;
  --text-color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

We can then use these variables when we style elements:

html,
body {
  background: var(--background-color);
  color: var(--text-color);
}
Enter fullscreen mode Exit fullscreen mode

If the body's class changes to sunrise or sunset, the css variables will cascade to all of the selectors.
In our case, we'll transition to a light or dark theme:

GIF showing a dark and light theme

JavaScript API

This is, in my opinion, the best part. CSS variables have a JavaScript API to get and set variables.

To get a variable, use the getPropertyValue method:

getComputedStyle(document.documentElement).getPropertyValue('--color')
Enter fullscreen mode Exit fullscreen mode

To get a value from an element, first select that element with querySelector:

getComputedStyle(document.querySelector('h1')).getPropertyValue('--color')
Enter fullscreen mode Exit fullscreen mode

To set a variable value, use style.setProperty:

document.documentElement.style.setProperty('--color', 'red')
Enter fullscreen mode Exit fullscreen mode

To set a value on an element:

document.querySelector('h1').style.setProperty('--color', 'blue')
Enter fullscreen mode Exit fullscreen mode

This API opens up some opportunities to use css variables in a clean way.

I encountered this use case a couple of days ago by David K. in one of his XState demos at https://codepen.io/davidkpiano/pen/zWrRye. He uses css variables to create a selection box when the user drags the mouse across the screen.

The css of the selectbox uses the variables to know the four corners (based on the starting point and the current position of the mouse) of the box:

.selectbox {
  left: calc(var(--mouse-x1));
  top: calc(var(--mouse-y1));
  width: calc((var(--mouse-x2) - var(--mouse-x1)));
  height: calc((var(--mouse-y2) - var(--mouse-y1)));

  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid currentColor;
  position: absolute;
  transition: opacity 0.3s ease-in-out;
}
Enter fullscreen mode Exit fullscreen mode

Listen on the mouse events, and update the the mouse points accordingly:

document.documentElement.style.setProperty(
  '--mouse-x1',
  ctx.selectArea.x1 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-y1',
  ctx.selectArea.y1 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-x2',
  ctx.selectArea.x2 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-y2',
  ctx.selectArea.y2 + 'px',
)
Enter fullscreen mode Exit fullscreen mode

GIF showing a drag panel

Ending word

If you are like me and didn't see the usefulness of css variables, or didn't know these existed.
I hope this post opened the door to start exploring their use cases.
I stumbled by accident on the JavaScript API, but this API opened my eyes for their real world usages and I'm looking forward to using and seeing them more in the future.

Latest comments (23)

 
timdeschryver profile image
Tim Deschryver •

That's a great tip, thanks for sharing!

Thread Thread
 
piotrk profile image
2pi.pl • • Edited

Unfortunately about 8% of the web users are still using IE11 and other browsers not supporting css vars. It depends on your company's policy if you need to take care about those users or not - we have to :(
Of course - it's good to know about "new" things but using them it's unfortunately other thing.
This fallback is good for simple cases, but if you'd like to change the value of the --background-color using javascript, simply changing the --background-color variable the colors won't change it in IE.

Collapse
 
piotrk profile image
2pi.pl •

From my point of view it's useless as long as IE11 is still used :(

Collapse
 
rmgfrederik profile image
Frederik Vantroys •

Very nice article. Tnx Tim ... Javascript API was new to me too ...

Collapse
 
timdeschryver profile image
Tim Deschryver •

Thanks Frederik, I'm glad you like it 😊

Collapse
 
nuxodin profile image
Tobias Buschor •

I made a polyfill to target IE11
Maybe someone can use it:
github.com/nuxodin/ie11CustomPrope...

Collapse
 
timdeschryver profile image
Tim Deschryver •

Awesome work Tobias! 👌

Collapse
 
cnngraphics profile image
Theo M. • • Edited

My life just changed reading this! Eye opening! I always wondered how to do themes? This answers my questions for sure! And JS API on top of it... I am blown away!

Collapse
 
timdeschryver profile image
Tim Deschryver •

Those were exactly my thoughts Theo!
I'm glad you learned something new out of this post 😊

Collapse
 
andrewevans0102 profile image
Andrew Evans •

This is so cool!

Collapse
 
ribizlim profile image
Mark Magyarodi •

css variables are an excellent feature, but the selectbox example isn't the most useful use case IMHO... one can set those css attributes directly.

Collapse
 
calebpitan profile image
Caleb Adepitan •

It's nice to use it. But I think browser support is still an issue.

Collapse
 
timdeschryver profile image
Tim Deschryver •

Zero IE support, for the rest it's looking good - caniuse.com/#feat=css-variables

Collapse
 
auroratide profile image
Timothy Foster •

Oh my goodness, I hadn't realized you can access these variables with JS. Thanks for sharing!

Collapse
 
timdeschryver profile image
Tim Deschryver •

When I encountered it I had the urge to write about it 🙂
I'm glad that this post was useful!

Collapse
 
ben profile image
Ben Halpern •

Without CSS variables, DEV probably wouldn’t have themes, and some folks really like their dark mode 😄

Collapse
 
itscosmas profile image
Cosmas Gikunju •

There's dark mode? been here since January and never noticed it 😂😂😂. just found it pretty deep in settings, would be nice to have a toggle where its better accessible.

Collapse
 
1isten profile image
STEN •

Where can I toggle the dark mode? I can't find that option(I'm using the PWA version of DEV on my phone).

Collapse
 
karataev profile image
Eugene Karataev •

Settings -> misc -> style customization

Thread Thread
 
1isten profile image
STEN •

That's dope!

Collapse
 
timdeschryver profile image
Tim Deschryver • • Edited

And we thank you and the whole team for these awesome themes 🤩

View full discussion (23 comments)