CSS Variables are cool

(Technically they're called properties, but everyone calls them variables because of the var(--mycolor) syntax -- and I'm a descriptivist not a prescriptivist, so I'm gonna call 'em variables too.)

Now... CSS Variables are COOL.

The hooded figures who lurk near the Forbidden Dog Park don't want you to know about CSS Variables. The Sherriff's Secret Police would rather we did not discuss CSS Variables. But I Must Press On With This Blog Post.

I started using CSS Variables when revamping NimbleText with dark mode.

But I didn't even begin to scratch the surface then. I didn't get it (I didn't need to) but now the deeper I dig, the more power I find. No wonder shadowy helicopters hover outside the window of my office tower, even now.

Basic usage

First, I used Css Variables as a way to make sure I could define useful colors "just once", and reuse them consistently.

e.g. you can define a "main" background color like this:

:root {
	--main-bg: #FFF;
}

And apply it to any selectors you want:

body {
	background-color: var(--main-bg);
}

And you can override that... for example for your dark theme:

@media (prefers-color-scheme: dark) {
	:root {
		--main-bg: #222;
	}
}

And that's fun. But the fun doesn't stop there!

Sidebar: wait what's the :root ??

You may have noticed, above, that we applied our variable definition to a :root selector... what is that strange thing? and what other options do we have?

The colon prefix tells us it's a "pseudo-class" (like :hover or :focus), in this case it's a special pseudo-class meaning the root of the document. So the variable we created applies to the whole document.

We could also have "scoped" the variable to just a part of the document...

footer {
	--bg: #222;
	background-color:var(--bg);
}

I'm not using that piece of knowledge yet, but I mention it because many authors gloss over it, and also, perhaps because a skeletal figure just dragged his ragged body across the floor of my office, rose to his bony feet, brandished a glistening metallic weapon with a bright logo from "Cranial Extracto Matic" and screamed, in a voice like a thousand metal polar bears shrieking in agony as they are fed into a terrible grinding machine, that it would perhaps be wisest if I refrained from mentioning ":pseudo elements" in this particular blog post. And I am a bit of a contrarian on these things.

Now for something cool

The cool thing I've noticed more recently (and why I'm writing to you about this now) is this:

You can reference variables from variables.

🤯

... and referencing variables from variables must have many uses, an infinite number of uses.

For me, an immediate and powerful use is for doing custom themes properly.

In a real world theme, on a real world site, you don't end up with just 2 or 3 colors. You end up with many, many slightly different variations on a smaller number of hues. (A good recent article on the topic is here). If a button has a gradient, then it has several variations of the initial color. A panel may have a less saturated version of a background color, pushing it into the distance. Many variations, many colors -- but very few hues.

With Css Variables we can reuse an underlying hue with different saturation, lightness or opacity.

Instead of putting an entire color into a variable, start by putting your hue into a variable.

For example:

:root {
	--main-hue: 124; /* a green hue */
}

If we have a "greenish" theme, perhaps a variation on the hue of the green slime that has begun to bleed from the shadowy apparition who hovers even now abaft the cavernous black void that threatens the rusted children's play equipment in the boarded up park across the road, then we can store our "hue" and make sure that every "greenish" color on our site is based upon that hue.

Write your colors in hsla format... e.g:

:root {
	--main-hue: 124; /* a green hue */
	--main-bg: hsla(var(--main-hue),100%, 13%, 1); /* background */
	--main-fg: hsla(var(--main-hue), 17%, 86%,1); /* foreground */
}

... and so on.

Thus your whole theme can build up and having many colors based on a small number of hues.

The dark theme might even use the same hue, but flip the saturation/lightness of the colors that build upon it. It's flexible enough to achieve anything you need. And all the while, a single fact such as the base hues of your theme are not repeated.

It's DRY, it's separation of concerns. All those "principles" people used to go on about back in the Olden times of Before.

With your underlying hue defined in a variable, you can change a single line of CSS and completely alter your theme.

Now make it dynamic...

Oh but wait, it's cooler than that.

In one line you can also change those variables with javascript.

var root = document.documentElement;
root.style.setProperty('--main-hue', 0); // now the theme color is pure red (`hue = 0`), not that slime-like green.

Or if -- like me -- you're a fan of taking things too far, you can have a timer that randomly tries out different hues, and a stop button for when you're happy.

Or you can have several hues all rotated by various amounts from each other, in triads, or complements etc. You can "AB test" different values, or survey a small group to see the best possible themes.

This is much closer to how things should be (and it's also much more satisfying than using a pre-processor). The stylesheet encodes the underlying relationships between the properties, instead of just hard-coding the final values everywhere.

The art of science is the science of turning art into a science and the art of turning science into an art of science. Or something.

All of this is powerful stuff that no one is talking about. Maybe because THE MAN wants to keep us DOWN, or because BIG CSS wants us to be silent and happy with our rems and our ems. But I'm not going to be quiet about this anymore. Variables are there: do something extraordinary with them today.

Oh and bonus points if you also use calc() with them -- i'd love to hear about some interesting uses of calc with var.

My lawyer also wishes me to make it known that certain elements of this blog post would not have been possible if I had not recently begun listening to far too much "Welcome to Night Vale"; a very, very, very good podcast. There are also books.

My book "Choose Your First Product" is available now.

It gives you 4 easy steps to find and validate a humble product idea.

Learn more.