Using CSS variables like a pro.

CSS variables help you to create custom CSS styles that can be reused continuously throughout your document or website.

Prerequisites

I am going to assume that you already have basic knowledge on how to style your html documents using CSS.

And with that on the confirmation,

Table of Contents

1. What are CSS Variables
2. The Scope
3. The Syntax
4. The Fallback Value
5. Inheritance
6. Specificity
7. Validity
8. Recap

What are CSS Variables?

Imagine you are creating a website with a large CSS code base and complexity, and you have a brand color of Red and Green which would be reused a number of times throughout the website. You decide to use Red as the main color, you finish building the website and you show it to your client but the client says he would have preferred Green instead. So you have to go back to all the instances that you used Red and then change them to Green. That sounds stressful doesn't it, especially if the number of those instances are 20, 100 or even more.

Now imagine if you had used a CSS variable instead to declare the value of the color Red and you had called that variable in all those instances. Then when the client decides to go with Green, all you have to do is change the color value in one place (i.e where you declared it), and just like that, all the Reds suddenly become Green. Magical isn't it. Not really, it's just the power of CSS variables.

"Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document."

CSS variables help to make the reuse of stylings a lot easier. All you have to do is declare it once and call it anywhere that you want to use it. Now that you know what it's about, let's talk about where we can use it.

The Scope

CSS variables can be used in any CSS selector. The type of the selector would determine if the variable would have a global or local scope hence become a global or local variable.

The global variables can be used by every element in the document, while local variables can be used only by the elements inside the selector where it is declared in.

To create a variable with a global scope, declare it inside the :root selector. The :root selector represents the document's root element.

To create a variable with a local scope, declare it inside the selector that is going to use it.

Do note that it is custom practice to define CSS variables in the :root but a few cases might warrant you having them in a local scope.

The Syntax

The syntax is really quite simple, and it makes use of a var() function.

First of all you have to declare the variable within the selector that you want to use it in. Note that only the child elements or descendants of that selector would have access to the variable as explained above.

// Syntax
selector {
    --variable-name: value;
}

// Example
:root {
    --main-color: red;
}

The variable must begin with two dashes (--) and is case sensitive! This means that --main-color is not the same as --Main-color or --main-Color. The browser will treat the above 3 as different custom properties.

The next step is to call the variable within the elements that will use it using the var() function.

// Syntax
element {
    style: var(--name, value);
}

//Example
button {
    color: var(--main-color, blue);
}

The value is optional and is known as a fallback value.

The Fallback Value

The purpose of a fallback value is that if for any reason the variable cannot be accessed and used by the browser, the browser should use this instead. So if our variable, --main-color cannot be used, then the browser should then use blue.

An instance would be if we

• made a spelling error when declaring our CSS variable name or when calling it.
• are calling a variable that is out of the scope it is being used in.
• forgot to declare the variable in the first place.

:root {
    --main-coor: red;
}

button {
    color: var(--main-color, blue);
}

Therefore if our variable cannot be accessed by the browser because it cannot find its declaration anywhere, then the browser should use blue as the next best thing.

If after this the browser still cannot access the fallback value because you did not give it a value to fall back on or you again made a spelling error, then you are on your own oh.

The browser would just look into the styles of the parent element to find if the property value is given there. If it's not it then looks into the next parent element and on and on going up until it has no more parent element and results back to its initial value, so therefore it would just be looking for styles for it to inherit. If it doesn't find one, the browser then gives the element back it's default property value.

<body>
  <div class="outer-div">
    <div class="inner-div">
       <h1>Title</h1>
       <p>paragraph</p>
    </div>
  </div>
</body>

.outer-div {
    color: green;
}

.inner-div {
    color: red;
}

p {
    --coor: blue;
    color: var(--color, blu);
}

You can see here that we are trying to make our p element to have a color of blue, but because we did not declare the variable and also misspelled the fallback value, it then inherits the red color from it's parent .inner-div. If you were to comment out the '.inner-div' color, the paragraph would then be a color of green gotten from the .outer-div, and if you were to comment that out again, the paragraph would now have a color of black, which is the default color it would inherit from the body.

But mind you if you were to give the body a color of orange, the paragraph would be an orange color instead of black.

It's all about inheritance.

Let's give another example of this.

Inheritance

The CSS variables of an element can be inherited by its children if the children do not have their own stylings or custom properties applied to them. Or in the case of the example above, have a spelling error. These children would in the end inherit the style property of it's parent.

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

.two {
    --test: 10px;
    font-size: var(--test);
}

.three {
    --test: 2em;
    font-size: var(--test);
}

From the example above, the class="two" element gets a font size of 10px which should be inherited by it's children.

The class="four" element gets a font size of 10px which it has inherited from its parent(class="two" element).

But the class="three" element on the other hand gets a font size of 2em because the value of the declared variable has now been changed within the child element.

Specificity

The same way specificity works in CSS is how it works with variables.

Take for example you declare a variable color twice in the same selector, firstly as red then secondly as green and then you call the variable in your p element. Which color do you think the p element would be?

.div {
  --color: red;
  --color: green;
}

p {
color: var(--color);
}

If you guessed green then you are right. The browser while going through the code would first save the variable as red, then when it sees that the variable is again declared a second time with another value, it then resaves the value to green. When it then finds a call for it --in our case the p element-- , it then gives it a color of green.

And from the example given in Inheritance above, you can see that the CSS variable declared in the child element takes precedence over the same CSS variable that was declared in its parent element.

Validity

In an instance where the value of a CSS variable is not a valid value for the property of the element it is being called in, it either inherits a new value or has its initial value used.

Lemme further explain this.

A CSS variable initially when declared would have it's value said to be valid. Here the browser has not found any need for it to be used in any element yet so it would have no choice than to call it valid and store it as a valid value for CSS variable.

But when it gets to an element where it is to be used i.e being declared, and finds out that the value being given by the variable is not a value that is acceptable as a property value, that value then becomes invalid thus making the variable invalid.

This does not mean that the declaration of the variable in itself is invalid, but in the instance where the browser tried to use it and failed, it becomes invalid only in that element property and in any other whose element property cannot use the value. And in that instance, the browser would then look into it's parent element to find a value to use or in the end use its initial value. It wouldn't even bother looking for a fallback value.

Lemme explain with an example.

<div>
  <p class="p1">This paragraph inherits the color green.</p>
  <p class="p2">This paragraph is blue.</p>
</div>

:root {
  --font-size: 20px;
}

div {
  color: green;
}

p {
  color: blue;
}

.p1 {
  color: var(--font-size, blue);
  font-size: var(--font-size);
}

The browser first stores the --font-size as a valid value of 20px. Then it gives all the paragraphs a color of blue as declared in the p selector. It then moves to the p element with a class of p1 and sees that the variable it has stored is being called and then tries to use it.

What is expected is that the browser takes the value of our CSS variable "--font-size" and substitutes it in our .p1 element, but since 16px is not a valid property value for color, the value becomes invalid because it doesn't make sense to the browser. The browser then handles this situation in two ways:

• It checks if the property color is inheritable. Seeing that it is, it then looks for a parent element, in this case the div element and finds that there is a color property value the p element can inherit. So now the paragraph gets a color of green.
• In the case whereby the element does not have a parent element or it's parent element does not have a property value it can inherit, the browser then sets the value back to its default initial value, i.e., black, ignoring the fallback value.

But if you had written color: 16px; instead of color: var(--font-size); then the browser would have viewed that as a syntax error and the previous declaration of color: blue; on the p element will then be used.

Now remember that we also used that same variable as a value for the font size for the same element. Do you think that the font size of our .p1 element would change or not?

Yes it would. This is because the 16px value of our CSS variable is now a valid value of the font size property.

As you can see, the variable was only invalid when we tried to use it as a value for our color but then became valid once more when we used it as a value for our font size.

And that's basically everything you need to know about CSS variables. Let's do a quick recap.

Recap

• CSS variables help you to create custom CSS styles that can be reused continuously throughout your document or website.
• They can either be globally scoped or locally scoped.
• To use a CSS variable, you have to declare the variable in a selector, which is usually in the :root and then call the variable in the element(s) you wish to use it in.
• A fallback value is a property value that is to be used if for any reason the CSS variable cannot be accessed and used by the browser.
• Css variables of an element can be inherited by it's children.
• A variable can become invalid if its value is not a property of the style that is being applied.
• The property either then inherits the value of it's parent element or goes back to its initial value when the value of the CSS variable becomes invalid.

And that wraps it up on the magic that is CSS variables. I hope you found it insightful and enjoyed reading it. I would be reading your comments down below.😁

Till next time guys. Byeee!

Connect with me on

1. Twitter.
2. LinkedIn.

If you like my notes and would like to support me, you can buy me coffee. I love the taste of coffee.🥰