How CSS Variables Can Improve Efficiency and Consistency
Code repetition is one of the more frustrating aspects of CSS. Having to type out the same property values over and over throughout a stylesheet takes time. And when making changes down the road, it’s too easy to miss a value.
The result is an inconsistent design. Things like colors, animation speed and element spacing can vary – simply because a designer didn’t catch every instance. Thus, the user experience is thrown out of whack.
CSS variables (a.k.a. Custom Properties) are a great way to combat these issues. Yet, not all designers know about this simple technique. Today, we’ll take you on a quick tour of what they are and what they do. Let’s dig in!