net

CSS

Above With var() you can also define a fallback value, which will be used if the given variable is
unreachable or non-existent

Custom properties (or CSS variables) are not a new feature –

they have been in the CSS spec since 2014 – but browser

vendors lagged behind. Firefox adopted early, Safari and Chrome in

2016 and in late 2017 even Edge implemented it fully, giving it 88%

global coverage with IE and Blackberry’s browser pulling back the

number. In 2018 it is safe to say that it’s ready for the modern web.

Choosing the native implementation over a rigid processor gives

you much more than a simpler development process. Custom

properties are live, they can be changed based on media queries,

element scope or with plain JavaScript. When a CSS variable

changes, the browser repaints the already rendered view without

any additional push. It’s low-level and fast.

The ability to iterate and change things without unnecessary

layers of abstractions enables you to ship faster and ultimately

build a better product.

THE BENEFITS OF

CUSTOM PROPERTIES

When a CSS variable changes, the browser repaints the already

rendered view without any additional push

CUSTOM PROPERTIES

With var() you can also define a fallback value,
which will be used if the given variable is
unreachable or non-existent for the class.

.site-navigation {
background-color: var(--color-red, red);
}

Values are inherited from the DOM, which means you
can make them more specific.

:root {
--color: red;
}

.site-navigation {
--color: green;

background-color: var(--color);
}

.site-footer {
color: var(--color);
}

Every var(--color) is red, except every var(--color)
under site-navigation. Generally speaking it’s not an
ideal practice to overwrite a value that is already
defined but there are cases in which a scoped value is
still the most adequate solution.

“The ability to declare

and reuse the variable

across your project

shouldn’t be optional”