CSS Spotlight: Custom Properties (aka Variables)
Custom properties, also referred to as variables, are used in CSS to decrease repetitive code and increase clarity. These variables contain specific values able to be reused throughout a document. More complex website will most often have a large amount of CSS, and as such likely have a lot of repeated values. Within this complex website, the same color value may be used in numerous places- and if this color needs to be changed a global search and replace would be required. Using a custom property allows for a value to be stored in one place and referenced in many others. This also helps with clarity as the custom property names (ex.
--text-color)can be more semantic than CSS color values (ex. #F0FFFF).
How to Incorporate Custom Properties
To declare a custom property you use a custom property name and prepend it with a double hyphen (
--), the value of this property name can be any valid CSS value. Custom properties are often referred to as CSS variables as they are used in the same way. To access a custom property elsewhere in the document you use the
Like any other CSS property, a custom property is written inside a ruleset —
Just as with any other CSS property, the selector that a custom property is defined under determines the scope of use for the property. It is common to define custom properties on the
:root pseudo-class, as this allows you to use the custom properties globally across the document.
Although this is a common practice, it does not have to be followed as there are times when limiting the scope of your custom property is valid.
To access a custom property you employ the following syntax —
If you were to use this
--text-color property on multiple elements but then wanted to change the value to a different color, you can do so easily by simply changing the value of the custom property and that change will reflect among all of the elements you have applied to custom property to.
Custom Property Inheritance
Custom properties inherit, meaning that if no value is set for a custom property on an element, the value of this element’s parent is used.
For example —
And the corresponding CSS —
The results of
var(--size) would be
className="fourth" as this element would inherit from its parent (
className="second"), and invalid value for
className="first" as there is not parent for this element to inherit from and the default value for any custom property is invalid value. Custom properties are only set for the matching selector and its descendants, just like any in other CSS.
The first argument provided to
var() is the name of the custom property, and the second (optional) argument is a fallback value which is used as a substitute for the custom property if it results in invalid value.
var() accepts only two parameters, everything after the first comma is evaluated as the second parameter. If this second parameter is invalid the fallback will fail.
color: var(--text-color, red);
In the above snippet, if
--text-color is not yet defined (i.e. invalid) then the color of the element will default to red. If an invalid custom property is provided to
var() and there is no valid fallback provided, the browser applies the inherited or initial property to the element.