CSS Custom Properties

You might’ve seen my JavaScript articles but we’ll talk about something completely different today. We’ll dive into the exciting(and scary for some) world of CSS. Have you ever written the same colour code for more than one element? Did you have to scroll up to find the colour code and copy paste it over and over again? If your answer is yes, then you’re definitely doing something wrong!

Why are custom properties useful?

Assume that you have a huge website and it has hundreds of CSS selectors. Among these hundreds of CSS selectors, you also have hundreds of instances where you declared the same colour but you are no longer happy with the colour you picked. Now, if you had to change the colour scheme, you’d have to backtrack across hundreds of lines and edit each value one by one. You could also use CTRL+H if you’re using VS Code and are a Windows user but that’s still time consuming. What if you could just change a single value and CSS could handle the rest? Well, custom properties are useful for exactly that! But that’s not the entirety of it either. We understand the importance of semantics more and more every day. For example, --main-font-size is more meaningful than 16px . We can maintain our code a lot easier and someone else can pick up our code to maintain it a lot easier as well. So, with all of that out of the way let’s talk about custom properties and how we use them.

What are CSS custom properties?

In short, they’re entities declared by the programmer to be reused throughout the document. The syntax is pretty simple, you put -- and write the name of your custom property. One thing worth noting here is that custom properties are case-sensitive. What this means is that --pink-colour and --Pink-colour are separate properties. Obviously, you need to write the custom property within a ruleset, suggested best practise is to use the :root pseudo-class as it can be globally used throughout our HTML code. However, you might want to limit the scope of your custom property and that’s completely fine. Let’s look at an example of a global scope custom property:

This declares a global scope custom property called main-theme-color and sets it to #3a3a3a. Okay, that’s cool but how do I use it? You can simply use var() like so:

So you simply use var and pass in your custom property as a parameter. You can also use fallback values for custom properties. Let’s see how we can do that:

If a browser cannot render our main-theme-color for some reason, it’ll fall back to rendering red. You can also nest custom properties like so:

You can add more fallback values if you wish, all you need to do is separate them with a comma.

That’s all for today. My next article will be on CSS Box Model, so stay tuned!

If you’d like to add something I missed, leave a comment down below. See you next time.