CSS custom properties (variables) – should you be using them?

What are CSS Custom Properties?

Custom properties in CSS are names that are prefixed with ‘––’. For example ‘––primary-color’. They contain a value that can be used in other declarations using the var() function as shown below:

:root {
  --primary-color: #434242;
  --accent-color: #c52031;
}

body {
    color: var(--primary-color);
}

h1 {
    color: var(--accent-color);
}

In this example the body copy would be #434242 and the h1 title would be #c52031. Now anywhere in your styling you’d like to use these custom properties you can just use the more memorable var(––primary-color). We found it useful to set up variables for all sorts of things like box-shadow, font-family, border radius as well as colours.

You will see that the ‘:root’ pseudo class is our selector for our variables. The reason this is done is that it collects all of your variables in one places which is great for maintenance. Also, it matches the whole page and everything in the html element so all of your variables are in scope.

The great thing is that you can quickly change the whole appearance of your website just by updating a few values. Or, combined with JS you could allow the user to set their own preferences while on your website! It means that everything is uniform and consistent in your design too which we love!

Should you use CSS Custom Properties?

On a recent project we decided to use CSS custom properties, it seemed like a no-brainer. It meant we could define our colours, borders, font sizes and a whole host of other styling attributes that we wanted to use throughout the project upfront and just call them in when needed.

During the build I wondered why we hadn’t done this before, why spend so much time and hassle repeating code?

A few weeks into the build, like any diligent web developer 😇 I decided that given the bulk of our custom template was built I would go and do some browser testing. Obviously, we had the mobile side of the build locked down but now was the time to load up the dreaded Internet Explorer.

It was immediately apparent that something wasn’t right. Assuming it was some sort of caching issue I cleared the cache and hit refresh, fully expecting everything to be alright. I was wrong.

What I/we had failed to do was look at browser support for CSS custom properties. Turns out that I.E doesn’t support them, at all! Great.

There are some workarounds, you can specify the colour for example for older browsers and I.E but then what’s the point in that? The whole idea was to be more DRY, not add more code.

The thought that we could change the whole appearance of the site just by updating a few custom property values was great, but now you’d have to update all the colours anyway so we’d just be creating more work.

The site was still under development but nearly built. We checked the stats on the existing website using Google Analytics and the site had somewhere in the region of 30-40% of its users on I.E. Unusually high in our experience but it made sense with the subject matter and target demographic.

We made the decision to drop custom properties and just replace them with plain css to get the site working properly cross-browser. Sure, it only took an hour to make the change but it highlighted our naivety in not checking browser support beforehand.

CSS Custom Properties Browser Support

The other issues you will find with CSS Custom Properties is that they cannot be changed dynamically and they cannot be read or changed using JavaScript.

Are there any alternatives

Sure, have you heard of LESS and SASS? If you would still like to use variables in the development of your site then you may want to learn more about these preprocessors. They are both very powerful CSS extensions which are backward compatible. Learning them isn’t too difficult at all, especially if you come from a programming background.

CSS Preprocessors allow you to streamline your development process, they compile down in to plain old CSS which means all browsers understand the output, so no cross-browser issues like with Custom Properties. Some of the main features of using a CSS preprocessor include:

  • Variables to store values for colors, fonts, padding, margin etc.
  • Mixins allow you to group declarations together, very powerful!
  • Nesting is probably one of the best features, it saves so much code and repetition as well as making your styling a lot easier to understand
  • ‘@import’ allows you to split out into multiple files. While in normal css you can do this it means another request. LESS and SASS allow you to combine them
  • Extend is another powerful feature, allowing you to share properties from one of your selectors to others
  • Operations are very clever as you can calculations with things like your sizes or paddings

Conclusion

If you have any desire to support I.E, and you probably should, then you have to decide if custom properties are actually worth the extra hassle. We think not, you would be much better off getting familiar with LESS or SASS and reap the rewards without the cost of browser issues. Once you have implemented one of these preprocessors you will never look back!

If you would like to know more about LESS or SASS and how you can convert your existing site over , or, you are interested in a new website using these technologies then please get in touch, we’d love to hear from you.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *