Speckyboy Design Magazine

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!

The Web Designer Toolbox

Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!

Web Templates

2,000+ Templates

Newsletter Templates

270+ Templates

Dashboard Templates

150+ Templates

WordPress Themes

1,200+ Themes

WordPress Plugins

550+ Plugins

Mockup Templates

8,200+ Templates

Start Downloading Now!

Set a Value Once, Use It All Over

Those who are familiar with programming languages such as PHP and JavaScript may recognize the term “variable”. A variable sets a value (static or dynamic) that can be retrieved later on in a script. For instance, a PHP variable called $user_first_name might be utilized to fetch a logged-in user’s first name to display on a page.

Similarly, CSS variables are there to repeat a value throughout a stylesheet. At bare minimum, this saves us from typing in a font family or hex color code multiple times.

You may also recognize variables from CSS preprocessors like Sass. There, variables serve essentially the same purpose (although the syntax is indeed different). However, they are not native to CSS. That means the preprocessor has to convert a variable into valid CSS.

CSS variables are a native solution. They’ll save you from having to use a preprocessor, unless you really want to. Now, any stylesheet can take advantage of this handy feature.

And you shouldn’t have to worry about browser support – with a caveat. Every modern browser has supported CSS variables for quite some time. But if you’re still targeting Internet Explorer users, a fallback will be required. That is a consideration, but everyone else is good to go.

A Basic Example of a CSS Variable

Color is one of the properties that often gets repeated throughout a stylesheet. For instance, you might use the same color for specific headings, container backgrounds, buttons and more. Using a CSS variable here makes the task of assigning and changing a value much more efficient.

Let’s use the iconic blue color of Speckyboy as an example. First, we’ll set up a variable in our stylesheet:

:root {
--speckyboy-blue: #4F78A4;
}

The variable name, --speckyboy-blue, is set to a hex color code. From there, it’s a matter of calling the variable for each and every instance where we want to use this pretty shade of blue.

If we wanted to use this as a text color on an element in our stylesheet, the syntax would look like this:

no-color: var(--speckyboy-blue);

The following example shows how the variable can be used in multiple places. For good measure, we also threw in another variable for our top and bottom margin value to keep spacing consistent throughout our design.

See the Pen
Basic CSS Variable by Eric Karkovack

Future changes will now be much easier as well. Because of the CSS variables in the above snippet, we now only have to change the hex color of --speckyboy-blue or the pixel value of --vmargin. Those values will cascade down to every instance in our stylesheet.

CSS Variable Resources

Our example only scratches the surface of what is possible with CSS variables. It’s worth digging a little deeper to see how it can be used in more advanced scenarios. The resources below are a great place to learn more:

• A Practical Guide to CSS Variables (Custom Properties) by SitePoint
• Everything you need to know about CSS Variables by freeCodeCamp
• Global and Component Style Settings with CSS Variables by Sara Soueidan
• It’s Time To Start Using CSS Custom Properties by Smashing Magazine
• Logical Operations with CSS Variables by CSS-Tricks
• MDN: Using CSS custom properties (variables) by MDN
• What is the difference between CSS variables and preprocessor variables? by CSS-Tricks

The post How CSS Variables Can Improve Efficiency and Consistency appeared first on Speckyboy Design Magazine.

Recent Articles: