CSS Variables

CSS Variables

This BlogPost was written by Andre Speek. Click here for other BlogPosts.

When writing CSS, I prefer to use variables. Or as they are also known: Custom Properties. First of all, it makes it a lot easier to make changes to a CSS file since the change has to be made in one place only. Additional benefit, it helps you keeping things simple and consistent. How? Just don't create to much variables and stick to the ones you have. Here's how you can use CSS Variables.

Defining the CSS Variables

It's common practive to define your variables at the top of your CSS file, as they will work from there on throughout the file. You can give a variable any name you like, preceded by 2 dashes. The value can be set like any other CSS attribute. Here's an example to specify some colors you would like to use:

* {
  --mainColorBG: #0000CC;
  --mainColorTxt: #FFFFFF;
  --headerTitle: var(--mainColorBG);
}

As you can see, I like to keep combinations together by name. That's why I have a main color background (BG) and the text color (Txt) to be used on that background color. Also, in this example I choose to keep the headers in the same color as the main color. I could have specified to use the same HEX code there. But to keep it as simple as possible to maintain, I opted to point to an existing variable instead.

To point to an existing variable, just use var() with the name of the variable you want to use in the parentheses. Be sure the variable you point to is already declared earlier in the CSS file. Otherwise it can not be determined and the CSS will default to the regular color.

Using the CSS variables

To use the variable you use the var() function with the name of the variable you want to use in the parentheses. So if you want to use the --headerTitle color for the h1, you could do it like this:

h1 {
  color: var(--headerTitle);
}

The scope of variables

Usualy I declare the variables that I want to use throughtout the whole CSS file at the top of the CSS file. That way they wil be applied everywhere because of the wildcard (*) I used.

But you can declare your variables later on as well. Do remember that they are only available inside the element they are declared on. But that is something you can use to your advantage as well.

For example, let's say you have a class .dataGrid and you want to have equally sized, round images (like avatars) inside of that. In that case, you could do something like this:

.dataGrid {
  --iconSize: 45px;
}

.dataGrid img {
  width: var(--iconSize);
  height: var(--iconSize);
  border-radius: 50%;
}

As you can see, this is also a nice trick to specify the height and width of square objects in one go. If you want to resize, just change the value of the variable and you are good to go.

Some more tips on CSS variables

Do note that the naming is case-sesitive. So --mainColorBG is something different that --mainColorBg. Try to work out your personal naming convention so you know what to use and don't spent time on finding out why thing don't work as expected. Luckily Visual Studio and Visual Studio Code will offer suggestions based on intellisense.

You can also set a different value after the variable is already declared. This is done the same way as the initial setting. You could do this to change the value in a specific scope. But be careful with this, because it might give you unexpected results in other places if you are not specific enough. Consider creating a new variable for this instead of modifying an existing one.

CSS variables that are defined in you CSS file can also be used in your HTML. That makes is also an excelent way to keep a clear separation betwwen your code and your styling. In your HTML you could do something like this:

<h1 style="color: var(--headerTitle);">Some title here</h1>

Keeping things simple and consistent

By using CSS variables it is easy to keep things simple and consistent. Especially for colors. How? Just stick to the variables you have. Is there a need for something new? First consider why it cannot be done using the variables you already have. If so, go for that. If not, just create a new variable.

In general a good design might have a maximum of 20 variables. That is to say, you can declare as many variables as you want. But in general, more than 20 might be a sign that a design is not consistent.

So if you can re-use one you already have, then go for that. Or at least consider it. Consistency is after all an important part of a good design.



Do you want to comment on this post? Leave a response here and I will get in touch with you!

You can leave a comment or send a question to andre@andrespeek.com. Let me know if you got inspired and stay safe and healthy always!




An error has occurred. This application may no longer respond until reloaded. Reload 🗙