During the recent years, CSS variables have sparked a lot of debate. On one hand, there are those who have been asking for them to be included and finding various workarounds to add a more programmatic approach to CSS. On the other side of the coin are those who argue that CSS variables have no place in a language that is supposed to handle the presentation of elements.
However, with the release of Chrome 49 and Firefox 43, it’s clear that CSS variables are now available in the form of custom properties and are meant to reduce repetition in CSS as well as aiding with runtime effects and CSS polyfill features.
But should you immediately jump on board and apply them in all your projects from here on out?
Let’s examine how CSS variables work and discuss why you shouldn’t rely on CSS variables exclusively.
HOW CSS VARIABLES WORK
CSS variables work much like the variables in any other programming language. You define the variable, assign a value to it, and then call the variable later in your code. A simple example using CSS is this:
In this example, we’ve defined a variable for the color and using the var function set that color as the background color for our element.
It’s important to note that the variable name starts with a mandatory double dash. Variable names are also case sensitive. Lastly, the variable can be assigned to a pseudo element like above or html element itself if you want your variables to be global. But, variables can also be assigned to any parent element of the child elements that will use the variable.
THE DIFFERENCE BETWEEN SASS VARIABLES AND CSS VARIABLES
If you’ve ever used Sass or Less or any other CSS preprocessor, you are probably familiar with the concept of CSS variables. However, the CSS variables which are usually used with preprocessors do not have the same capabilities as the new custom properties.
For example, using Sass it’s easy to define a set of global variables and reuse them throughout your document like so:
However, once you define a variable, it remains the same. With custom properties, you can change the variable on a per-element basis which means they follow the basic principle of CSS, the cascade:
But should you immediately jump on board and apply them in all your projects from here on out?
Let’s examine how CSS variables work and discuss why you shouldn’t rely on CSS variables exclusively.
HOW CSS VARIABLES WORK
CSS variables work much like the variables in any other programming language. You define the variable, assign a value to it, and then call the variable later in your code. A simple example using CSS is this:
In this example, we’ve defined a variable for the color and using the var function set that color as the background color for our element.
It’s important to note that the variable name starts with a mandatory double dash. Variable names are also case sensitive. Lastly, the variable can be assigned to a pseudo element like above or html element itself if you want your variables to be global. But, variables can also be assigned to any parent element of the child elements that will use the variable.
THE DIFFERENCE BETWEEN SASS VARIABLES AND CSS VARIABLES
If you’ve ever used Sass or Less or any other CSS preprocessor, you are probably familiar with the concept of CSS variables. However, the CSS variables which are usually used with preprocessors do not have the same capabilities as the new custom properties.
For example, using Sass it’s easy to define a set of global variables and reuse them throughout your document like so:
However, once you define a variable, it remains the same. With custom properties, you can change the variable on a per-element basis which means they follow the basic principle of CSS, the cascade:
In this basic example, every element will have the width assigned to 960px. But, the value of the declared variable changes for each element as long as the element is specific enough.
3 REASONS WHY YOU SHOULDN’T RELY ON CSS VARIABLES
As you can see from the example above, CSS variables greatly extend the functionality of CSS and open up a whole new world of possibilities. However, there are a few things to keep in mind before completely embracing them.
1. MAKE CSS HARDER TO MAINTAIN
Once you introduce variables to CSS, you need to memorize the name of your variable and be able to understand it when you encounter it later on in your code. While that’s easy enough with a variable or two, it becomes increasingly harder to remember the names the more variables you add into the mix.
This makes it harder to maintain your stylesheets months or years down the road as you have to keep referring to the beginning of the document or perhaps, even a different stylesheet altogether to remind yourself of what the variable represents.
2. BACKWARDS COMPATIBILITY
As of writing this article, 24% of all browsers do not have full support for CSS variables. While this number may seem insignificant, when you pair that with the global browser usage, it’s easy to see that quite a few users wouldn’t be able to see the web page properly as browsers who don’t support the variables will simply ignore them.
This means that if you want to support the fullest spectrum of devices and browsers, you’d have to make sure to provide fallback within your stylesheet.
3. STEEPER LEARNING CURVE
Finally, it’s worth mentioning that adding CSS variables into the mix introduces a steeper learning curve for beginners as well as anyone else who might be collaborating with you on the stylesheet or taking over the project.
It’s not uncommon for beginners to look at existing stylesheets and learn from examples. By introducing variables, you are adding a layer of abstraction that may be too complicated to understand, especially if you don’t take the time to properly comment your code.
FINAL THOUGHTS
CSS preprocessors introduced the concept of CSS variables more than a decade ago. Those preprocessors allowed us to reuse certain bits of code and other features without worrying about backwards compatibility, browser support, or stylesheet maintenance. However, they do come with the drawback of being static and lacking the ability to change.
The newly-introduced CSS variables allow for more freedom, functionality, and creativity in our code and go beyond the abilities of preprocessors we are so used to by now. But, they are not entirely flawless either.
At the end of the day, you’ll need to weigh the pros and cons of implementing them in your daily workflow and decide whether they are truly needed for the project you are working on.
That’s not to say you should refrain from using them at all but rather, avoid relying on them exclusively and aim to provide a fallback to accommodate for the largest possible number of devices and browsers.
Post a Comment