What is CSS Variable - in simple terms

Hello everyone! 💙

In this article, I will write about CSS Variables, scoping CSS Variables, and how they can help you to create better, and more maintainable CSS.

let's get started 💃

CSS Variables are sometimes referred to as CSS Custom properties or Cascading Variables. They allow information to be maintained and referenced in many locations. They make it easy to read and understand code especially when the code was done by someone else.

A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables.

DEFINING VARIABLES

Declaring a Variable is done using a Variable name that begins with a double hyphen (--), and a property value that can be any valid CSS value.

Example:

h1 {
--main-bg-color: #358597;
}

• CSS variables are case-sensitive:

--Main-Bg-Color and --main-bg-color are not the same. To prevent this confusion, avoid using capital letters in variable names.

• Use hyphen delimited strings like this:

--main-text-color instead of --maintextcolor when defining a string.

USING CSS VARIABLES

To use the CSS variables you must specify your CSS Variable name inside the var() function, in place of a regular property value.

The var() function is used to insert the value of a CSS variable.

The syntax of the var() function is as follows:

var(--name, value)

• The variable name (must start with two dashes)

• Value is Optional: The fallback value (used if the variable is not found)

Example 1:

h1 {

--main-text-color: white;

color: var( --main-text-color);

} 

Example 1 contains the variable name alone.

Example 2:

h1 {

--main-text-color: white;

color: var( --main-text-color, red);

} 

Example 2 contains the variable name and the fallback value(red).

SCOOPING VARIABLES

Scope determines the range of the accessibility of the variable. Scope helps to store separate values, which come into play only when they are necessary.

Variables have two types of scope:

• Global Scope
• local Scope

GLOBAL SCOPE

Global scope is declared in :root pseudo-class. Declaring the variable in :root enables the variable to be accessed/used through out the entire document or globally across the entire HTML document.

To declare a variable in the global scope, you:

• Define the variable in a :root{} pseudo class

:root { 
--primary-color: #000;
--text-shadow: 2px 2px 1px white;
 }  

• Assign the variables to different child elements in your document

h1,h2 { 
color: var(--primary-color); 
text-shadow: var(--text-shadow);
}

Declaring a CSS variable on the :root pseudo-class and using it where needed throughout the document, will help you avoid repetition and it will be easier if you want to change the value across the entire page later.

It is common practice to define variables inside the :root but not mandatory

LOCAL SCOPE

The local scope would only affect the specific HTML element that it is declared in along with any children that the element may contain.

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

Example:

h1 {
  --font-size: 18px;
  --line-height-h1: 1.6;
  font-size: var(--font-size);
  line-height: var(--line-height-h1);
}

Remember that Global variables can be accessed/used throughout the entire document, while local variables can be used only inside the selector where it is declared.

HOISTING CSS VARIABLES

Like in JavaScript, CSS variables can be hoisted. This means that CSS variables can be used before they are declared.

Example:

body {
color: var(--font-color);
}

:root {
--font-color: orange;
}

As you can see in the above example, CSS variable --font-color was used before it was declared in the :root pseudo-selector, and the code works fine.

OVERRIDING CSS VARIABLES

You can override CSS Variables like every other CSS property.

Example:

:root {
--btn-color: red;
}

button {
--btn-color: white;
color: var(--btn-color);
padding: 2em;
}

In the above example, the button text color will be white.

• I set the --btn-color: red; on the :root pseudo-class meaning I want my button text color to be red

• I wasn't okay with the red color for my button so I changed:

--btn-color: red; to --btn-color: white; on the button selector meaning my button text color will be white instead of the red color I set on the :root{} pseudo class.

Overriding the CSS variable is cool, yeah? be careful not to overuse this as you are defeating the main purpose of CSS variables if you are going to be overriding them.

I will tell you to change the value from the :root pseudo-class or assign a different variable.

USE OF MULTIPLE VARIABLES

You are not limited to use a single var() in your declarations.

Example

:root {
--padding: 10px 20px;
}

div {
padding: var(--padding);
}

DECLARING A VARIABLE WITHIN A VARIABLE

You can also declare a variable within another variable.

:root {
--background-color: orange;
--border: 1px solid var(--background-color);
}

button {
border: var(--border);
}

FALLBACK VALUES

Fallback values are used if the variable value given as the first argument isn't defined or has an invalid value.

Example 1:

body {
background-color: var(--main-background-color, green);
}

If --main--background-color is not defined or declared, the color of the background will be green.

Example 2:

h1 {
color: var(--main-text-color, var(--text-color, green));
}

Notice any difference between Example 1 and Example 2 ?

Example 2 have more than one fallback value. In Example 2:

• --text-color is the fallback value for --main-text-color, green is the fallback value for --text-color

• Color will be green if --main-text-color and --text-color are not defined

I hope you understand?

Fallback values only accept two parameters, everything following the first comma is the second parameter. If the first parameter is provided the fallback will fail.

ADVANTAGES OF USING CSS VARIABLES

• Makes the code easier to read(understandable).
• Makes it much easier to change the color values.
• CSS variables can be declared anywhere, it is flexible.
• CSS variables help remove redundancy In code.

CONCLUSION

The ability to maintain and reference information in more than one location is a huge benefit of CSS variables. This allows us to easily update information and not have to go into every place we used that information. They also make it easier to read and understand code and they make it easier to work with other developers on a project.

If you have any questions about CSS variables, you can leave them in the comment section below and I'll be happy to answer every single one.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍.