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 this issues 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 buckets of 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’.

Cascading Variables

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.