What are CSS custom properties?
Tags: css
Published: 2022-07-17 15:35:39

**Note prior to reading:**
This article assumes that you know what a scope is.

---

**Reading time:**
10 to 15 minutes.


Download this article for free [here](https://docs.google.com/document/d/1CWgEBPDOjUxlPtSMgGzm8svrEaVs6AKz/edit).

---

First of all: I love CSS. From the way it’s written, to its many ways of being used to its powerful features. And it’s actually one of the powerful – if not **__the__** most powerful – features this article is going to touch upon. As the headline reveals, we’re going to dive into the world of CSS custom properties.

So, what are these bad boys, and what makes them so powerful?

First thing first: CSS custom properties are used to make your CSS more dynamic. They are basically variables in CSS (hence their second name CSS variables). A property is defined once in the root scope, and thereafter referenced in the scopes throughout your CSS in which you wish to apply that variable. The benefit of them is the same as with a variable in any other programming language: Declare once, use anywhere. And that’s also what makes them powerful. You only have to declare the variable once, and then you can use it anywhere. If you decide that you want to change it later on, you only have to change it in one spot instead of all over the place in your CSS file(s).

The way they're written when declared might be a little obscure at first, but once you've got used to it, you're going to use them all the time (yes, those bad boys are that powerful).

You start by writing to hyphens (-) followed by the first word in the variable name. If the variable name is going to be more than one word, then all the rest of the words are each separated by a single hyphen. So, if you e.g. want a custom variable for a primary color (the color that's going to be the most dominant in your web project), it would look something like this:

`--primary-color: red;`

Then to use it in another scope, the syntax would look like this:
`color: var(--primary-color);`

***Side note:***
You can make any thinkable CSS property a custom variable. As in **__ANY__** CSS variable.


So, what does all this gibberish I’m blabbering about even look like, and how do I implement it?

Well, I’m glad you asked this question, because I’m going to be feeding you with an example both with and without the use of custom properties


[Without custom properties:]
(https://jsfiddle.net/6qLozvt1/)

As you can see here, I have set the color of the heading and paragraph individually. And you might think: "Couldn't you just have grouped them together with a comma?", and all I can answer to that question is: "You're absolutely right!". But if I want to have the same color on two different elements and have some different stylings to each of them on top of that at the same time, the grouping by comma trick will not be efficient anymore, since you will have to define both scopes separately anyway. And that's what you'll experience in the following example.

[With custom properties:]
(https://jsfiddle.net/VS130300/x5kwg9va/16/)

That's it!

> _- Remember to make your website just a little bit more awesome every day._