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.
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.
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.
An Interesting Use Case: Responsive Modules
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, mixing or an extension 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 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.