27
What are CSS-Variables?
In Javascript we usually declare and intialize a variable in one of the following ways:
let a = 10;
const b = 20;
var c = 30;
But in CSS, we don't use any such keyword like
Yes
let
, const
, var
; instead we just use 2 hyphens (dashes --) before the user-defined variable name and put them in a scope.Yes
scope
, just like in Javascript we've scopes like function scope, block scope, global scope we also have scopes in CSS.:root {
--main-color: red;
}
Here we've used the
But then the question for specificity arises, like suppose we've the same CSS-property defined at the global level as well as the local level, then which value will be preferred?
For that consider the following code snippet.
Here we can notice a lot of things:
:root
selector. It targets the top element of the DOM and hence has a global scope. Similarly we can have other local scopes based on different CSS Selectors.But then the question for specificity arises, like suppose we've the same CSS-property defined at the global level as well as the local level, then which value will be preferred?
For that consider the following code snippet.
Here we can notice a lot of things:
div
.As seen above, we can access the CSS Variable defined above using the
Hence unlike other languages variables in CSS, don't store values, they just replace it with the actual CSS value when used.
var()
function.var()
function takes the property name as argument, retrieves it's value from the stylesheet if it's present and replaces it with the actual CSS-Property.Hence unlike other languages variables in CSS, don't store values, they just replace it with the actual CSS value when used.
var()
can also be used to provide a fallback value in case the property is missing.
div {
font-size: var(--main-font-size, 16px);
}
Consider the following Codepen for understanding how to access and change CSS-Variable in Javascript.
getPropertyValue()
method of the computed CSSStyleDeclaration object.setProperty()
method of the CSSStyleDeclaration object.
Consider the following CSS Code.
:root {
--main-font-color: #E9E9E9;
--main-bg-color: rgba(128,128,0,1);
}
p {
color: var(--main-font-color);
background-color: var(--main-bg-color);
}
span {
color: #E9E9E9;
background-color: rgba(128,128,0,1);
}
Now, having looked at both the ways of using CSS i.e. with and without the use of CSS Variables, let's see what benefits we get using CSS-Variables over CSS without it.
1. Ease of maintainability:
Let's say you've put in hours of work to select appropriate styles and colors and all of a sudden the requirement for that styling changes. You'll have to go through the entire project to change the colors and styling, but suppose if you've used CSS variables, you could've changed the value of the CSS property once and it would reflect at all places.
2. Code becomes more readable:
As we can see above, the variables are user-defined so they can contain semantic meaning, and hence using these variables makes more sense as it is becomes much easier to understand and maintiain.
1. Ease of maintainability:
Let's say you've put in hours of work to select appropriate styles and colors and all of a sudden the requirement for that styling changes. You'll have to go through the entire project to change the colors and styling, but suppose if you've used CSS variables, you could've changed the value of the CSS property once and it would reflect at all places.
2. Code becomes more readable:
As we can see above, the variables are user-defined so they can contain semantic meaning, and hence using these variables makes more sense as it is becomes much easier to understand and maintiain.
media-queries
.
For other differences please look at the following section for an amazing article on CSS-Tricks
27