Custom properties or CSS variables
$ whoami
Senior Software Engineer
I like JS, React, movies, music and I'm a big fan of LOTR and Star Wars 🤓
May the Force be with you!
5 years with GlobalLogic
about 6+ years in Web Development
    GitHub page
Speaker and mentor at GL JS community
Inna Ivashchuk
CSS custom properties
1
Using CSS custom properties (variables)
2
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var()Â function (e.g., color: var(--main-color);).
Basic usages
3
Declaring a custom property is done using a custom property name that begins with a double hyphen (--), and a property value that can be any valid CSS value. Like any other property, this is written inside a ruleset, like so:
buttom {
--jll-ds-button-primary-background: #333333;
}
Note: the selector given to the ruleset defines the scope that the custom property can be used in
Best practice
4
A common best practice is to define custom properties on the :root pseudo-class, so that it can be applied globally across your HTML document:
:root {
--jll-ds-button-primary-background: #333333;
--jll-ds-main-color: violet;
}
Ok, but how to use them?
5
How to use CSS variables
6
var() function
7
To use the custom property value by specifying your custom property name inside the var()Â function, in place of a regular property value:
element {
background-color: var(--jll-ds-global-surface-base-reversed);
}
Using CSS variabes
8
:root {
--jll-ds-global-surface-base-reversed: #333;
}
button {
color: white;
background-color: var(--jll-ds-global-surface-base-reversed);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
“It’s quite possible that there are more functionality.”
Â
15
What you should know about CSS vars
16
22
Custom properties do inherit. This means that if no value is set for a custom property on a given element, the value of its parent is used. Take this HTML:
Inheritance of custom properties
<div class="two">
<div class="three"></div>
<div class="four"></div>
</div>
.two {
--font-size: 10px;
}
.three {
--font-size: 2em;
}
22
In this case, the results of var(--test) are:
- For the class="two" element: 10px
- For the class="three" element: 2em
- For the class="four" element: 10px (inherited from its parent)
Inheritance of custom properties
<div class="two">
<div class="three"></div>
<div class="four"></div>
</div>
.two {
--font-size: 10px;
}
.three {
--font-size: 2em;
}
Fallback values
16
Using the var() function, you can define multiple fallback values when the given variable is not yet defined; this can be useful when working with Custom Elements and Shadow DOM
.two {
/* Red if --my-var is not defined */
color: var(--my-var, red);
}
.three {
/* pink if --my-var and --my-background are not defined */
background-color: var(--my-var, var(--my-background, pink));
}
.three {
/* Invalid: "--my-background, pink" */
background-color: var(--my-var, --my-background, pink);
}
Custom property fallback values
Note: The syntax of the fallback, like that of custom properties, allows commas. For example, var(--foo, red, blue) defines a fallback of red, blue — anything between the first comma and the end of the function is considered a fallback value.
element {
background-color: var(--my-var, red, blue);
}
Browsers support
:root {
--primary: yellow;
}
body {
background-color: yellow;
background-color: var(--primary);
}
CSS variables with fallback for older browsers
Thank you!
46
CSS variables
By Inna Ivashchuk
CSS variables
Long story short
- 415