The CSS custom properties for cascading variables module adds support for cascading variables in CSS properties and lets you create custom properties to define these variables along with the mechanisms to use custom properties as the values for other CSS properties.
When working with CSS, you often end up reusing common project-specific values such as widths that work well with your layout, or a set of colors for your color scheme. One way of managing repetition in stylesheets is to define a value once and use it many times in other places. Custom properties let you create and define custom variables that can be reused, simplifying complex or repetitive rules and making them easier to read and maintain. For example, --dark-grey-text
and --dark-background
are easier to understand than hexadecimal colors such as #323831
, and the context of how you use them is more obvious, too.