CodeX
Published in

CodeX

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

Learn to Mix in Some 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 var()function (ex. color: var(--text-color);).

Like any other CSS property, a custom property is written inside a ruleset —

element {
--text-color: #F0FFFF;
}

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.

:root {
--text-color: #F0FFFF;
}

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 —

h1 {
color: var(--text-color);
}

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 —

<div className="first">
<div className="second">
<div className="third"></div>
<div className="fourth"></div>
</div>
</div>

And the corresponding CSS —

.second {
--size: 100px;
}

.third {
--size: 7em;
}

The results of var(--size) would be 100px for className="second", 7em for className="third" , 100px for 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.

Fallback Values

Within the var() function you are able to define multiple fallback values to be used when the variable is not yet defined. If you are familiar with JavaScript syntax, this can be compared to a default parameter.

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.

.second {
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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Denali Balser

Denali Balser

Full-stack software engineer experienced in Ruby on Rails, React, Redux, and JavaScript based programming.