Your guide to what's next.
CSS variables
Mar 18, 2020

CSS variables

Using CSS variables.

CSS variables, also known as CSS custom properties, are assigned reusable values such as colors, widths, font families, z-indices, and so on. The notation is as follows:

.article-section {
    --main-font-color: #303030;

    .article-section .article-heading {
    color: var(--main-font-color);

    .article-section .article-comments {
    background-color: var(--main-font-color);

Variable names always have to begin with --, and are referenced by var(--my-custom-property). The var() function can also be passed multiple fallback values. For example,

.btn {
    color: var(--main-font-color, #212121);

means that the color property is assigned #212121 if --main-font-color is not defined.

Manipulating CSS variables from JavaScript

The CSS Object Model (CSSOM) defines APIs for programmatically manipulating CSS property values. Custom property values can be accessed and modified in the same way as standard CSS properties.

See also
Line breaks in CSS
How to tune the browser's text wrapping algorithms?
What is Cypress?
Generating data URLs in JavaScript
How to generate data URLs in JavaScript?