Michael Gearon

CSS Custom Properties for Cascading Variables

Michael Gearon

Last updated on

One of the biggest issues with CSS is scaleability, for a lot of people it is a nightmare. Many CSS values are duplicated throughout the document which when you have hundreds of lines of CSS can be time consuming to find all the values again to change and can be prone to errors.

To fix these issues in CSS we have turned to preprocessors such as Sass, SCSS and Less. One of the many benefits of preprocessors is the ability to create variables which can be used throughout all of the files and then complied into CSS files saving loads of development time.However CSS is set to change, using custom properties and cascading variables.

Custom Properties

A custom property starts with 2 dashes, like ‘–paragraph-color’.

If you wanted to set CSS variables for the document you could add all of your variables to the root, such as this:

--font-size: 14px;
--brand-color: #efefef;

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.