Time's up. The sale is over
Time's up. The sale is over

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.

Epic React

Get Really Good at React

Illustration of a Rocket
Kent C. Dodds
Written by Kent C. Dodds

Kent C. Dodds is a JavaScript software engineer and teacher. 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.