Why You Should Use CSS Variables [Beginners Guide]

You may have already heard about the use of variables in CSS. This is a feature many programmers requested for and it is finally here. The question is why just a few people use it and why it is not so popular among beginners.

In this article, we will answer these questions, show you a simple example of how to use it and if it is even worth knowing.

Irrespective of the programming language, variables are simply containers used to store information for later use, they help us give data a descriptive name to increase readability of our codes.

We use variables in CSS for the same reasons we use them in any other programming language: the ease to modify them, simplicity, add descriptions, etc.

When working on a medium to large app, the CSS can get really confusing and ugly and this is a nightmare when you want to change a feature. Since many property values are duplicated you must find each one of them and make the necessary changes.

With CSS variables you only need to make changes to the variable and every other property name that uses that variable will be modified.

Let me show you.

First you declare your variables:

:root {
  --bgcolor: #ffffd0;
  --headerfontsize: 40px; 
}

You can now use the variables declared above in you CSS by using their names as the property values. For example:

h1.top {
  color: red;
  background-color: var(--bgcolour); 
}

If you have different property names using the variable, you only have to modify the value of the variable where it is defined and the whole document where that variable is used would be modified.

As you can see it is not that complicated.

As humans we tend to avoid what we don’t know so well, we just don’t want to change the way we do things especially when we are comfortable doing something a certain way or using a specific tool or method.

That is our natural nature to resist change.

Have you ever wondered why you just can’t stop doing something the way you do, even if your friends or colleagues tell you other ways which you know might be better? You just don’t want to accept it.

For example, try changing code editors.

The same applies to why people don’t use CSS variables. Since it is not commonly thought when you start learning CSS for the first time due to the fact that you won’t appreciate the importance, you get so used to styling elements a certain way (without CSS-variables).

But when you start building larger apps you realize that it’s a maintenance nightmare trying to change for example the margins of many selectors to a certain value.

Some might be thinking — Why don’t you just do a global search. Yes, that works! But since CSS property values are not case sensitive, you might not find all of them. An example would be with the color codes:

#ccc

,

#CCC

,

#CCCCCC

are all valid and are the same color, but the global search won’t detect all of them.

SASS, which you’ve probably heard about if you have some time programming, and which so many developers describe as CSS on steroids, is an alternative solution. Yes, SASS is cool, but it requires some extra setup which might scare away beginners whereas CSS-variables come inbuilt in CSS3.

You might say well I don’t build large apps, so I don’t need it. Well if your goal is to work in a large organization you sure would be working on a large app or maintaining one.

Start now to practice.

As they say, practice makes perfect!