Member-only story

Your super-simple intro to CSS Variables

Get started with this powerful CSS feature

Twan Mulder
Prototypr
7 min readDec 7, 2020

--

Photo by Sigmund on Unsplash

I’ve been using CSS variables for quite some time now. They save me a bunch of time and headaches when it comes to writing CSS.

But maybe, you’re not familiar with them (yet 😉).

Maybe you are a little late to the CSS Variable game.

Or you’re just starting your journey as a web-developer and stumbled on the term “CSS Variable” or “CSS Custom Property” somewhere.

Maybe you just want to freshen up your knowledge on the concept.

In this article, I’ll go through why you should know what CSS Variables are and how you can use them to level-up your CSS skills as a developer.

So what are CSS Variables?

CSS Variables (or CSS Custom Properties) are entities defined by CSS authors that contain specific values to be reused throughout a document.

Sounds a little technical, right?

Let’s break it down.

A CSS Variable will look a lot like a regular line of CSS.

But instead of using an already existing property like “font-size”, “margin”, or “padding”, we will create our own custom property.

--

--

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Written by Twan Mulder

Frontend Developer who loves creating enticing experiences | Employed at De Bijenkorf

Responses (1)

What are your thoughts?