CSS Custom Properties

Our websites utilize a CSS feature known as “Custom Properties” to define specific values globally. This allows for easier global updating of colors, fonts, icons, and other items within this site’s styling on the BBSWS without having to crawl through every style and manually update the values individually. 

HOW A CUSTOM PROPERTY IS DECLARED

When writing a CSS custom property, the following syntax is used:
--custom-property-name: value;
 
The name of the property is always preceded with a set of two hyphens (--) before the property name. Property names are case sensitive. The naming convention for property names on this site are hyphen delineated, and semantic. For example the property for a site’s “main color” would be the following:
--color-1: #71bf43;
 
Properties are declared along with other CSS declarations for any given selector. A majority of this site’s custom properties are declared at the root (:root) within the custom css area of the site.
 

CALLING A CUSTOM PROPERTY IN CSS

When using a CSS custom property in your CSS, the following syntax is used:
selector { property: var(--custom-property-name); }
 
The custom property name is always enclosed within the var()function. As an example, if we were trying to set the color of a H2 element, we would write the following:
h2 { color: var(--color-1); }
 
It should be noted that when writing CSS with the style editor of the site, the need for a selector and brackets are not necessary.
 

NESTING CUSTOM PROPERTIES

Custom properties can reference other custom properties, or be “nested” with each other.
--body-color: var(--gray-1);
 
In this example, we are setting the value for --body-color to the custom property --gray-1. As long as that property has been declared somewhere higher in the CSS stack then whenever --body-color is used, the value will be that of --gray-1.