CSS 3 brought along many new and exciting features including advanced animations, more robust selectors and Custom Properties! This post will focus on custom properties in CSS, and give you an insight into what they are and how we can leverage them to make dealing with CSS a little easier.

What is a Custom Property?

If you’ve programmed in other languages before, you’ll be familiar with the concept of variables. Custom properties, also referred to as CSS variables, are a powerful tool that allows web developers to define reusable values in CSS and access them from anywhere in a stylesheet.

Browser Support for CSS Custom Properties

Browser support for CSS Custom Properties is actually quite good. Check out the caniuse page here.

Declaring a Custom Property

Declaring a custom property in CSS is a little different than declaring a variable in other programming languages. Custom properties are not strongly typed and should be prefixed with --.

--custom-property-name: value;

A real-world example of this may be:

--primary-color: #034efc;

Note that custom properties are case-sensitive. This means that --primary-color will be treated as a separate custom property to --Primary-color.

Scope

The ruleset that the custom property is declared in defines its scope. A common convention is to define your custom properties in the :root pseudo-class so they can be accessed globally.

:root {
	--primary-color: #034efc;
	--secondary-color: #b503fc;
}

Using a Custom Property

To use a custom property that you’ve declared, simply use the var keyword and append the name of the custom property in brackets as the value of a CSS property.

:root {
	--brand-color: #0388fc;
}

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

Fallback Values

If a custom property is not defined, a fallback value can also be passed in.

:root {
	--brand-color: #0388fc;
}

h1 {
	color: var(--brand-color, blue);
}

The above example states that if --brand-color is undefined, the fallback value of blue will be used instead. Furthermore, you can even use another custom property as a fallback of a custom property.

:root {
	--brand-color: #0388fc;
	--primary-color: #034efc;
}

h1 {
	color: var(--brand-color, var(--primary-color, blue));
}

If --brand-color is undefined, --primary-color will be used. If --primary-color is also undefined, blue will be used.

Inheritance of Custom Properties

Custom properties in CSS can be inherited. Consider the following.

<div class="grand-parent">
	<div class="parent">
		<div class="child-1"></div>
		<div class="child-2"></div>
	</div>
</div>

.parent {
	--my-value: red;
}

.child-1 {
	--my-value: blue;
}

In this example, the values of each element would be as follows:

grand-parent: invalid value, since there is no value set and is the default value of any custom property.
parent: red
child-1: blue
child-2: red

Managing CSS Custom Properties in JavaScript

We can use JavaScript to retrieve and modify the values of our custom properties. Let’s have a look at an example of this.

Retrieve Values of a CSS Custom Property

Let’s create a simple HTML page and use a CSS custom property to change the color of the heading.

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<h1 id="main-heading">CSS Custom Properties</h1>
	<p>They're pretty neat!</p>

	<script>
		var mainHeading = document.getElementById("main-heading");
		var headingStyles = getComputedStyle(mainHeading);
		headingStyles.getPropertyValue("--primary-color");
	</script>
</body>
</html>

:root {
	--primary-color: #034efc;
}

#main-heading {
	color: var(--primary-color);
}

Now, all we need to do to retrieve the value of --primary-color through JavaScript is use the getComputedStyle() method, and tack on the getPropertyValue() method after it:

var mainHeading = document.getElementById("main-heading");
var headingColor = getComputedStyle(mainHeading).getPropertyValue("--primary-color");

This returns the value of --primary-color which is set to #034efc.

Set Values of a CSS Custom Property

Changing the value of a custom property through JavaScript is even easier. We can use the setProperty() method on the element, like so:

var mainHeading = document.getElementById("main-heading");
mainHeading.style.setProperty("--primary-color", "red");

The above example will set the value of --primary-color to red.

Pretty neat, right?

Why Use Custom Properties?

You might be wondering why you should even bother using custom properties in the first place. The main benefit of custom properties is the ability to reuse values across the stylesheet. For example, if multiple elements need to have the same background color, it would be inefficient to manually set the color each time. Instead, we can define the --main-bg-color property once, and then access it whenever it’s needed. This also allows us to make quick changes to the value without needing to search through the entire stylesheet.

CSS Custom Properties vs. Sass Variables

CSS Custom Properties and Sass Variables are both useful tools when it comes to writing CSS. However, they have some key differences.

The main difference between the two is that Sass Variables are processed at compile time, while CSS Custom Properties are processed at runtime. This means that Sass Variables can be used to generate CSS code, while CSS Custom Properties are used to store and retrieve values in the stylesheet.

Sass Variables can also be used to set variables with complex data types, such as lists and maps. This is useful for setting variables that need to be used in calculations. CSS Custom Properties, on the other hand, are limited to simple data types such as strings, numbers, and colors.

Finally, CSS Custom Properties have the advantage of being able to be modified and retrieved in JavaScript, while Sass Variables cannot. This makes CSS Custom Properties ideal for creating dynamic stylesheets.

Overall, both CSS Custom Properties and Sass Variables are useful tools when it comes to writing CSS. They both have their own advantages and disadvantages, and it is important to understand which one is best suited for a particular task.

Conclusion

Custom properties are an incredibly useful tool for web developers. They provide an easy way to define reusable values and access them from anywhere in the stylesheet. This helps reduce code duplication and makes maintenance much easier.