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.
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.