CSS variables & their features
Tags: css, html, javascript, webdev
Published: 2020-09-04 15:47:24

CSS is adopting many features by the passage of time. Here, we will see that __what CSS Variable__ is & it's __benefit of usage.__ If you're familiar with computer programming background you have noticed about work & need of `variables` eg. `var = 10;`
##What is variable?
A variable is kind of `space` we occupy in `memory` while declaring it. 
##Why we use Variable?
If you want to do something like `plus` `➕` two things or apply any mathematical operation eg. `var a=10;` `var b=10;` `c=a+b;` now, variable `c` has value of `a` & `b`. which is equal to `c=20`
don't worry! every language has its own `syntax` for declaring variable but I have used here `javaScript syntax`.
Let's focus on `CSS Variable`,
##What is CSS Variable?
CSS Variable is not rocket science. It works the same as we use other programming language variables but we can't apply any mathematical operation like `+ - * /`on CSS variable. we just use to take a space in memory by declaring any CSS `property` as memory address & `property's value` as a memory address value. that's it.
##Why we use CSS Variable?
To understand this question, first we have to see visual answer.
![Alt CSS variable](https://dev-to-uploads.s3.amazonaws.com/i/6d5lp7wldibotevddg4r.png)
We can see I have declared my CSS variable in `:root` because it will apply to all root HTML which means whole HTML document more simple `:root` is the parent element of the HTML page and inside the root, you can see more about parent and child elements in `HTML-DOM` in my another article [HTML-DOM manipulation]( https://dev.to/fahad07_khan/html-dom-manipulation-by-javascript-3k9b), I have declared CSS variable & now it will apply to all it's children. You can also declare CSS variable in another parent/location like,
![Alt CSS variable](https://dev-to-uploads.s3.amazonaws.com/i/xplytrd7hzpe5x3fqbhq.png)
Here we have declared our CSS variable in `my-container` & it is parent which means `my-container` has child elements that's why it is parent. see in picture below,
![Alt HTML](https://dev-to-uploads.s3.amazonaws.com/i/cyx57nbx1b3vzboo3yub.png)
Above, `my-container` has its own element so if we declare CSS variable in `my-container` it will work on only its child element which are, `<p>` & `<h4>` but it will not work on `body` ` <p> I'm Child of body and my ancestor is root of HTML</p>` because this `<p>` is not child of `my-container`. For applying CSS variable body `<p>` element, we must target its parent (`body` OR `root`)
eg. `:root{--my-variable: #ddd}` here `#ddd` is the code of a color. 
##Syntax to declare CSS varible 
Syntax is not very difficult just you have to remember just two things 
1. `--` it is part of declaring CSS variable eg. (--xyz: abc)
2. `var()` while using it.
now see some CSS variable examples
![Alt CSS variable examples](https://dev-to-uploads.s3.amazonaws.com/i/v93ml1tjerpnv5yzt4ut.png)
You have noticed that I have only changed the `value` eg. `18px` of `property` `font-size`.
 
##Bullet Points:
1. While declaring CSS Variables we just set the value eg. `18px` , `#0001`, `"Times New Roman", Georgia, Serif;` but the property name will remain same while using it.
2. Here `background-color: var(--my-background-color);` `background-color` property name of CSS will ramain as it as but it's value now become dynamic `var(--my-background-color);` instead of `#0001`.

##Benefit of Using CSS Variable
Using CSS Variables we made our code dynamic. 
Let's suppose you have written `HTML` & `CSS` with thousands of lines and after all, you want to change your CSS code eg. all `<p> & <h1>` `color` & `font-size` then __What you will do?__
definitely, you have to change all lines where you have declared CSS property value & this become a time-consuming process. To counter these problem CSS Variables were introduced for changing your property's `value` just in seconds by changing only 1 value of the property. Now see the real-world example,
![Alt CSS variable practical example](https://dev-to-uploads.s3.amazonaws.com/i/1ouedpfrphfr5bd3xf7n.png)
![Alt HTML](https://dev-to-uploads.s3.amazonaws.com/i/w60alg575mensepqc0ux.png)

Do you notice that `--my-p-color` is applied on all `<p>` elements which are children of `<body>` tag & `--my-font-size` just applied to its child which is ` <p>I'm Child of my-container & my ancestor is body</p>` beasuce `--my-font-size` is declared in `.my-container`that's why it works on only its child element. That's all about CSS Varibles. Hope now you are familiar with CSS Varibles.