How to keep your CSS code clean ?
CSS variables help in declaring values for reuse across a CSS file.
Let’s discuss more about it in this thread 🧵
CSS variables help in declaring values for reuse across a CSS file.
Let’s discuss more about it in this thread 🧵
CSS variables help us store the values of properties that can be used in the entire HTML code.
Complex websites have very large CSS,often with a lot of repeated values.These variables help us to define one value of a particular property which can be used then in the entire code
Complex websites have very large CSS,often with a lot of repeated values.These variables help us to define one value of a particular property which can be used then in the entire code
Cool right?
Let’s see first the life before CSS variables and after CSS variables.
Let’s see first the life before CSS variables and after CSS variables.
Let me show you now how we declare variables to our codes more clean and readable
A common best practice is to define variables on the :root pseudo-class so that it can be applied globally across your HTML document.The var() function is used to insert the value of a CSS variable
A common best practice is to define variables on the :root pseudo-class so that it can be applied globally across your HTML document.The var() function is used to insert the value of a CSS variable
Imagine if you have these tags/ classes at different places in code of 10000 lines. And then, suddenly you want to change one property. Here, you have to find each class or tag in your CSS to change it manually.
Super hectic right? Well, this is the reason we use CSS variables.
Super hectic right? Well, this is the reason we use CSS variables.
Fallback values are the second argument used in the “var()” function, which denotes the substitution of a CSS variable.
It is a backup for the browser which supports CSS custom properties to choose a different value if the given variable isn't defined or has an invalid value.
It is a backup for the browser which supports CSS custom properties to choose a different value if the given variable isn't defined or has an invalid value.
Thanks for checking out the content.
Follow @PriteshKiri for more web development tips and tricks
#codewithcoffee #codewithcoffeeindia
Follow @PriteshKiri for more web development tips and tricks
#codewithcoffee #codewithcoffeeindia
Loading suggestions...