The use of CSS Variables allows us as developers to instantly update a property value throughout our entire application with one single change - no more ‘Find and Replace’ or tediously searching through thousands of lines of code to update countless styles.
Understanding CSS Variables
The easiest way to understand CSS Variables is by thinking of them as custom properties. For example, in the body selector, you might add the property ‘background-color’ with a value of ‘white’.
With CSS Variables we create our own property and give it a value. The property being the name we want to give our variable, which is then followed by its value.
To declare a variable we have to start our property name with a double dash followed by the name we want to use and our value:
-- property: value;
Keep in mind these names cannot contain spaces and if you wish to use multiple words, the best practice is to separate them using a single dash:
These variables can represent both short and long hand properties and can be given any value we want.
Like normal CSS properties, we have to declare our variables inside of a selector. It is best practice to have all our variables inside the root selector so that every other element has access to those custom properties. This can be done by using the root pseudo-element:
How to use your Variables
To use our variable, we find the property we want to add it to and set the value using var (abbreviation of variable) followed by our variable name inside brackets:
Going back to our body example (see above), we can get the same effect by declaring our variable and setting it as the value:
“Why would I use CSS Variables? That looks like more work only to get the same result!”
On first look, you might think this but let me give you a real-world scenario…
It’s harder to see the benefits on a small scale but imagine you’re coding a large website for a client with huge style sheets. Each of which could contain thousands and thousands of lines of code with hundreds of repetitive values such as certain colours, font-sizes, and margin values.
What if all of a sudden the client changes their mind and wants a different colour scheme or layout? You would have to go through every line of code manually updating the new values, whereas if you were using CSS Variables it would only be 1 minor change to the variable itself and everything would update automatically.
A really powerful use of CSS Variables would be changing the ‘theme’ colours of your application using, for example, a button:
As of this publish date, CSS Variables are supported across most major platforms (93% to be exact) excluding, you might have guessed, Internet Explorer. Now, is it possible to get around this without breaking one of the fundamental design principles of CSS: Forward and backward compatibility?
The short answer to this is yes, we would do this the same way we make any CSS compatible - use a specific fall-back that is supported by the browser:
The problem in doing this is that it would essentially make the CSS Variable useless and almost defeats the purpose of even using them. With that being said, it is necessary for browser compatibility, and providing you have already set your variables, you can identify the references easier and add your fall-backs as needed.
To conclude, CSS Variables are great for reducing repetition in your code and also for powerful runtime effects like theme switching; however, they are not entirely flawless. With browser support not being at 100%, we can’t rely on variables exclusively and must provide fall-backs to accommodate the largest possible number of devices and browsers.