Why is it needed?

If you have been following web development for some time you would the hype around CSS Custom Properties. So let’s see Why So Hype ??( read in Heath Ledger Joker tone 😜)

We all are habituated to writing CSS and specifying properties for elements. However many times to maintain a similarity across the website we tend to write repetitive code. One of the major goals for developers is to reduce this repetitive code enabling easy, fast ways to change properties and enable efficient code writing and code debugging, and code refactoring.

This is where CSS Variables come into play . Take a look at the code below and see the amount of repetition used in the CSS file.

.list1 {
  color: white;
  background-color: darkviolet;
  margin: 2rem;
  width: 50px;
  height: 50px;
  display: block;
}

.list2 {
  color: white;
  background-color: darkblue;
  margin: 2rem;
  width: 150px;
  height: 70px;
  display: block;
}
.list3 {
  color: white;
  background-color: darkviolet;
  margin: 2rem;
  width: 75px;
}
.txt1 {
  background-color: darkviolet;
}

💡 As we see for applying the same color to different classes we had written the code each time. Note the repetitive CSS. The background-color is set to darkviolet.

Here is a Codepen Example with HTML and CSS to show the code.

https://codepen.io/aashirwad01/pen/XWzgKzN

Solution: So What to do?

To avoid such a need for repetition we can define properties using CSS variables to write once and use throughout the code.

This also enables us to change property once and update throughout the doc without having to change it all.

Thus facilitating easy debugging and refactoring of code alongside way less repetition.

CSS variables or also known as Custom CSS properties are values defined by the author to use throughout a document.

They are set using custom property notation (e.g. —main- color : black) and are accessed using var() function (e.g. color : var( —main-color);)

This might not look a big deal in small code however big websites and in complex code, we might use the same color in hundreds of places requiring global search and update for changing a simple color 😪.

Custom properties allow us to store ( not such a good term to use we will see why later 😬) and reference in multiple places 😎.

How to use it?

In order to define any custom property we begin, its name with a double hyphen(—). and valid CSS property value. Just like any other CSS property, it is written within double brackets { } i.e a rule set.

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

element {
  --text-color: white;
}

You might have noticed:root in the above code. It is a pseudo-class that allows us to define properties within it that can be used globally across entire HTML.

You can learn about :root from below MDN doc.

:root - CSS: Cascading Style Sheets | MDN

Using it in Code

Enough Chitchat! Let’s start using it in Code 😋

So take an example of the above defined code .Pasting here again for reference.

.list1 {
  color: white;
  background-color: darkviolet;
  margin: 2rem;
  width: 50px;
  height: 50px;
  display: block;
}

.list2 {
  color: white;
  background-color: darkblue;
  margin: 2rem;
  width: 150px;
  height: 70px;
  display: block;
}
.list3 {
  color: white;
  background-color: darkviolet;
  margin: 2rem;
  width: 75px;
}
.txt1 {
  background-color: darkviolet;
}

Here we declare a custom property of —main-bg-color in root and use it wherever required in code. Pretty Dope 😏

The result is the same, yet this is very useful for refactoring the style of the site at once.

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

.list1 {
  color: white;
  background-color: var(--main-bg-color);
  margin: 2rem;
  width: 50px;
  height: 50px;
  display: block;
}

.list2 {
  color: white;
  background-color: darkblue;
  margin: 2rem;
  width: 150px;
  height: 70px;
  display: block;
}
.list3 {
  color: white;
  background-color: var(--main-bg-color);
  margin: 2rem;
  width: 75px;
}
.txt1 {
  background-color: var(--main-bg-color);
}

💡 It is not necessary to define custom properties only within a :root pseudo class . Defining it in:root allows us to change properties globally. However, if we want to only change property locally for an element-specific even this can be done by specifying the custom properties only within the scope of the ruleset.

To see and use Var() in CSS here is the above code’s codepen snippet.

https://codepen.io/aashirwad01/pen/ZEayBew

Splitting Colors using Custom Properties 😳

This is one of the coolest use of custom properties 😎

Say we can define different values for hsl in custom variables and we can use combinations of them together or can change the color value individually in specific cases.

https://codepen.io/aashirwad01/pen/vYWZxgw

Here is an article to see how individual values in elements can be changed in CSS.

https://css-tricks.com/now-css-custom-properties-thing-value-parts-can-changed-individually/

How to use Calc() with Custom properties 💪

Here is small sample code to see how to use calc() with var() function .

.d2{

  --spacing: 1.2rem;
  padding: calc(var(--spacing) / 2));



}

Custom property fallbacks

Say we have declared a custom property, what will happen if we don’t provide any value to the variable set 🤔

The callback will use the second comma-separated value instead 😏

For e.g

html {
  font-family: var(--fonts, Helvetica, Arial, sans-serif);
}

Here if —fonts doesn’t have any value specified font family takes additional fallback values 🤩

We can also have a series of fallbacks, but for that we need them to be nested.

Take this example :

html {
  font-family: var(--fonts, var(--fontsfallback,Arial);
}

Pretty Cool 😁

Now, What will happen if the wrong value is given to Custom Property? 🥲

Whenever a invalid substitution in var() is used , either the initial value or the inherited value is used .

Let’s see the below code

<p class="para">Because Var() is the hero CSS deserves, 
but not the one it knows right now </p>

Let’s look at the CSS code ( wherein lies the mis step 😶)

:root { --text-color: 2rem; }

.para{
  color:var(--text-color);

}

See how we have written 2rem for —text-color property . So the resulting .para has a default color set for it which is black!

Since there is no parent from which .para could inherit any color, the initial color which is default is used instead of the inherited one.

Untitled

On that note let’s see Inheritance of Custom Properties 🤗

Inheritance of Custom Properties

For reference here is the codepen snippet below.

Below is a short description of how divs are arranged.

We have a div 1 with class d1 within which we have

div 2 with class d2
- Inside div 2 we have div 3 with class d3 and div 4 with class d4

https://codepen.io/aashirwad01/pen/rNYwWjR

In the above case, we have property spacing to define padding spacing in class d2 and padding spacing and margin spacing in class d3.

We observe that :

In Class d2 padding spacing is 1.2rem. Specified using local custom property spacing
In Class d3 padding spacing is 2rem and margin-bottom is also 2rem. Specified using local custom property spacing.
In Class d4 padding spacing is 1.2rem ( inherited from class d2).

Gotcha! Does var “store” values? 🤔

Future of CSS

We have seen how using the var() function we create a CSS Variable which gets substituted for the value of the Custom Property it refers to.

There is a suggestion for “Higher Level Custom Properties”.

Custom Properties that control a number of other CSS Properties. As per the proposal right now we have a new @if at-rule and alongside var() this would make custom properties Kaboom 💥💥.

Also, Atomic CSS is also in trend and hype these are immutable classes that have complete responsibility of applying a unit style to the selected component of the UI.

In Short and Crisp way Future of CSS is not Just Monstrous “ it’s Ahead Of The Curve “😉

CSS Custom Properties using Var() function

Comments

Frontend WebD

Theming in MUI v5

More from this blog

ES6 Features: write less, do more

Say No to Create React App!

Getting Started with NodeJs

Best Practice To Manage Folder Structure For React.js

JavaScript Array Methods Detailed Review of forEach() ,map , filter() and reduce()

Why is it needed?

Solution: So What to do?

How to use it?

Using it in Code

Splitting Colors using Custom Properties 😳

How to use Calc() with Custom properties 💪

Custom property fallbacks

Now, What will happen if the wrong value is given to Custom Property? 🥲

Let’s look at the CSS code ( wherein lies the mis step 😶)

On that note let’s see Inheritance of Custom Properties 🤗

Inheritance of Custom Properties

Gotcha! Does var “store” values? 🤔

Future of CSS

(Comment on how you used `Var()` and specifically comment on How many of my Batman Movie dialogues you Got 😉 )

Command Palette

Comments

Frontend WebD

Theming in MUI v5

More from this blog

Why is it needed?

Solution: So What to do?

How to use it?

Using it in Code

Let me share a secret tip 🤫

Splitting Colors using Custom Properties 😳

How to use Calc() with Custom properties 💪

Custom property fallbacks

Now, What will happen if the wrong value is given to Custom Property? 🥲

Let’s look at the CSS code ( wherein lies the mis step 😶)

On that note let’s see Inheritance of Custom Properties 🤗

Inheritance of Custom Properties

Gotcha! Does var “store” values? 🤔

Future of CSS

(Comment on how you used Var() and specifically comment on How many of my Batman Movie dialogues you Got 😉 )

(Comment on how you used `Var()` and specifically comment on How many of my Batman Movie dialogues you Got 😉 )