So, Can We Use CSS Variables Yet?

Default avatar.
October 18, 2017
So, Can We Use CSS Variables Yet?.
With all the talk lately of finally being able to use CSS Grid, it got me thinking: What other amazing CSS features can I use now? CSS Variables was the one that instantly sprung to mind. It’s been a while since I’ve heard anything about CSS Variables and it adds a whole new toolset and way of thinking to front end development that excites me.

A Refresher on CSS Variables

CSS Variables have been knocking around for a few years now but don’t seem to be in wide usage. With the popularity of pre-processors such as Sass, frontend developers scratched that variable itch a long time ago. I was first excited by CSS Variables in around 2014 and since then they’ve dipped in and out of my interest sphere. I’m only now considering getting them into production sites and I’m going to show you how simple and easy they are to use.

Declaring the Variable

Declaring the custom property is simple: We need only create the property we want and append two dashes to the beginning of it. These can be declared anywhere but adding them to :root seems to be a good approach at the moment.
--my-reusable-value: 20px;

Accessing the Variable

Using the property is pretty simple as well. We access it through the var() function and use the property we declared above.
padding: var(--my-reusable-value);
Isn’t that simple and glorious? CSS Variables are straightforward to use and pretty easy to remember. The biggest challenge with CSS Variables (as with most CSS) is knowing the right time and place to use them. Throwing them in haphazardly is a sure fire way to create a mess of a stylesheet and with these variables thrown in debugging will probably become more difficult. Proper use cases and strategies for using them should be considered and this is where the majority of your effort should be focused.

An Interesting Use Case : Responsive Modules

In the following example I’m going to show you a basic example of how I currently build a responsive component using Sass variables. Then I will show you how it could be improved upon with CSS Variables in a way that’s not possible with a pre-processor. This is a specific use case which does not apply to every way variables are used but is to show how CSS Variables can be used differently.

Sass Example

See the Pen CSS Variables - responsive use case without CSS Variables by Adam Hughes (@lostmybrain) on CodePen.

When using Sass there are a few different methodologies I’ve tried. My current go to version is placing media queries within the CSS blocks I want to change. In here I can use a variable, standard CSS, mixin or an extend to modify this element without scattering the styles for the component everywhere. One problem with this is having multiple media queries and lots of variables which are kind of related but not. I could use maps for the variables which would give more organisation but I think the main issue is that we’re using a multiple variables to define one property. This just feels wrong. Sass variables are used ahead of time which means we have to plan every way we’re going to use them. They make developing easier but technically don’t provide us with any new superpowers.

CSS Variables to the Rescue

See the Pen CSS Variables - responsive use case by Adam Hughes (@lostmybrain) on CodePen.

CSS Variables do not need to be declared up front, they are dynamic. This is useful in a very different way. We can now conditionally change variables from anywhere and in specific contexts such as media queries. By serving our media query styles right up from we can reduce the amount of media queries scattered around for responsive styling. It also gives a really nice and clean way to see general spacing and typography styling across different formats. I think responsive designs and theming are two excellent use cases for CSS Variables but there are so many possibilities.

How Are CSS Variables Different From SASS Variables?

Sass Variables and CSS Variables are two different beasts, each with their own pro’s and con’s.

Sass Variables Can Be Organised Better

Due to the popularity of Sass and the more programmatical nature of Sass, more in depth organisation patterns have evolved over time. I particularly like sass maps and combining similar type variables into the maps. Colors, sizes and shortcuts for paths seem to be popular choices for including in maps. Because of the relatively smaller usage of CSS Variables the best practices have yet to evolve. Maps and arrays are not possible in the same way in CSS so these new organisational patterns will have to innovative and solve the problems in a different way to Sass.

CSS Variables Can Be Dynamically Changed

CSS Variables are handled dynamically by the browser at runtime whereas Sass Variables are used when the CSS is compiled. This is the core selling point of CSS Variables for me. It will be interesting to see how people use this feature over time and whether it will live up to its potential.

CSS Variables Are a Standard Browser Feature

I’m personally of the opinion that the more things we can remove from Webpack, Gulp, and whatever-new-framework-is-out-now, the better. Having interesting new browser features means we don’t have to rely on compilation and JavaScript frameworks to do things developers feel are essential. I would hazard a guess that a high percentage of frontend developers use variables in their CSS in one way or another, so everyone using this a core feature seems like a sensible thing to do. It means one less thing in the build step (which I think we can all agree is getting pretty immense these days) and more consistency across the web.

What Is The Support Looking Like?

The support is looking remarkable good with one glaring exception: IE 11. Most modern browsers support CSS Variables with Edge having a few bugs. At 78.11% this is higher than CSS Grid (at the time of writing) but that IE11 support could be a problem.

So, Can We Use CSS Variables Yet?

I think the time is now. That IE11 support is not going to get any better, and we know from previous versions of Windows that it takes a long time for some people to upgrade. But the support across modern browsers is great which means we should be looking to CSS Variables and experimenting with the possibilities. That doesn’t mean we shouldn’t forget about our responsibility to older browser support though. A basic fallback system using a supports tag, or even a polyfill, for older browsers should be considered, even more so if your actual site usage is a lot more skewed to older browsers. It’s an exciting time for front end development, and I for one can’t wait to be using more of these technologies in my production sites.

Adam Hughes

Adam is a Frontend Developer based in Liverpool, UK. With a focus on user experience he has worked with clients such as Arsenal FC, Liverpool FC and Volkswagen. Follow his hair brained schemes and projects on twitter @lostmybrain

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…