A Refresher on CSS VariablesCSS 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 VariableDeclaring 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 VariableUsing 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 ModulesIn 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.
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
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 BetterDue 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 ChangedCSS 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.
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 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
So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…
Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…
By Max Walton
Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…