What if your website contains a lot of CSS? or example,On your website, the same color is reused hundreds of places throughout the document, and later on if the color needs to change .The custom property stores the value at one place and then referenced it in multiple other places.

Variable declaration

The variable declaration starts from double - and it has both global and local scope. and it has any CSS valid value.

here the syntax:

--variable-name:value;

and how you can access it

Property:var(--variable-name);

Local Scope

If you are declaring the variable inside the selector then it's only applicable upto that selector only

local declaration of variables

.class{
  --bg-color:blue;
}

You can acces it through var()

.class{
--bg-color:blue;
background-color:var(--bg-color);
}

Global Scope

You can use the :root to declare the global variable to access it globally

Global declaration of a variable

--root:{
--bg-color:blue;
}

Advantage

lets take the example ,if you want to change the color of the document

Old way

The code below is the without variables.if you want to change the color , now, you have to remove from every selector . Below we use little css but what if your website contains a lot of css and you need to change the color then you have to remove from every selector and add the new , which is time consuming and annoying also.

.class {
  color: white;
  background-color: blue;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.class-one {
  background-color: blue;
}
.class-three {
  color: yellow;
  background-color: blue;
  margin: 10px;
  width: 75px;
}
.class-four {
  color: white;
  background-color: blue;
  margin: 10px;
  width: 100px;
}

Using Custom Property

Now,where variables custom property helps you.Below code is with Variables. If you need to change color of the entire page , you can simply change the color from the :root

Below you just need to change the --main-bg-color rather than changing from every selector

:root {
  --main-bg-color: blue;
}

.class {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.class-one {
  background-color: var(--main-bg-color);
}
.class-three {
  color: yellow;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.class-four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

The main advantage of using variables:

• being able to quickly change many values in your stylesheet by just changing the value of a variable.

• makes the code easier to read (more understandable)

Variable name

Your variable name must be short and descriptive .

for example:

--color:blue ; /*this is not recommended*/
--bg-color:blue; /* it is most appropriate as it we can say that is a background color.*/

--font-color:red;/* this is also short and dexcriptive .*/

Note: custom property is case sensetive

--bg-color is different from --Bg-color

Fallback Value

You can use multiple fallback value when the given variabe is not defined.

It is only help when your browser supports custom property. when your variable is not defined or invalid then browser use this fallback value as a backup.