Why you should be using CSS Variables!

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.

They also have access to the DOM, which means we can use JavaScript and media queries to manipulate the values of our variables and create some really efficient code. Not only that, but we can access the variable inside the developer tools to test different values without being inside our code editor.

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:

--my-property: value;

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:

var(--my-property)

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.

Using JavaScript with Variables

A really powerful use of CSS Variables would be changing the ‘theme’ colours of your application using, for example, a button:

There are many ways this can be done in JavaScript but I’m going to focus on this example to explain. If you’re not familiar with JavaScript, I’d highly recommend learning the fundamentals to help understand how this works.

Firstly, make sure you have an element declared from your HTML inside of JavaScript which we will use to change the CSS Variable - in this example, we are using the ‘button’. We then add a click event to the ‘button’ which calls an arrow function. Inside this function, we select the ‘documentElement’ which is our root (where the CSS Variables are stored) and set a style property that takes in two parameters - one being the CSS Variable name and the other being the new value we want to use.

The downside?

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.

Conclusion

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.

I like to talk about design principles and share my knowledge with fellow devs. Connect with me on LinkedIn https://www.linkedin.com/in/joenapper6/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store