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:

:root{
--font-size: 14px;
--brand-color: #efefef;
}

More Guides

  • How to disable text selection using CSS
  • How to disable text selection using CSS
  • CSS background-clip text
  • Michael Gearon

    Written by

    Michael Gearon

    Senior Interaction Designer and Co-Author to Tiny CSS Projects