CSS Variables — Introduction
Custom Properties a.k.a. CSS variables seem to be a forgotten technology when it comes to structuring CSS files. It’s uncommon for me to see people using this technology.
CSS variables are basically a way for us to store certain values against a named variable that can be reused throughout the stylesheet.
The variable is initialized with this structure --variable-name and can be used using var() .
:root {
--brand-primary: rebeccapurple;
}header {
background: var(--brand-primary);
}footer {
color: var(--brand-primary);
}
NOTE: CSS variables can only be used for property values and not for selectors or property names.
/* NO */
var(--my-selector) {
background: rebeccapurple;
}header {
var(--my-property-name): rebeccapurple;
}/* YES */
header {
background: var(--my-variable);
}
var()
The var() function takes in 2+ arguments. The first being the variable we want to use, and the rest are fallback values that will be used when the previous one cannot be used.
header {
background: var(--brand-primary, rebeccapurple);
}We can also use other variables as fallbacks when the initial one cannot be used.
header {
background: var(--color, --brand-primary, rebeccapurple);
}Specificity and Cascade
Similar to how rules are applied in CSS, specificity and cascade still apply.
<section>
<header>
<h1>Hello</h1>
</header>
</section>:root {
--color: rebeccapurple;
}section {
--color: tomato;
}header {
--color: cornflowerblue;
}h1 {
color: var(--color);
}
The colour of the h1 will be cornflowerblue since the header is more specific compared to section and body.
h1 {
--color: rebeccapurple;
color: var(--color);
}h1 {
--color: olivedrab;
}
The colour of the h1 will be olivedrab because it comes after the h1 block of the same specificity.
What’s the point?
So what’s the point of using CSS variables if we can create another class to make something a different colour? This is what I initially thought when I first learned about CSS variables.
h1.purple {
color: rebeccapurple;
}h1.olive {
color: olivedrab;
}
Manipulation through Javascript
The true power of CSS variables is its ability to reduce the amount of CSS we would need to write. Specially if we’re trying to manipulate the style of elements on our page.
Looking at the example above, we can write the code like so:
h1 {
color: var(--color);
}We can then use Javascript to manipulate this element. By using the function setProperty, we can manipulate the CSS variable by changing the its value.
h1Element.style.setProperty('--color', rebeccapurple)See it in action: https://codepen.io/koralarts/pen/bPqWOe.
Theming
Another good use of CSS variables is for theming! Before variables, would write our CSS as such.
.light section {
background: whitesmoke;
}.light h1 {
color: #333;
}.dark section {
background: #333;
}.dark h1 {
color: whitesmoke;
}
We can see that we’re rewriting the selectors to change the values that we need for the different themes. With variables we can write the CSS without or with little repetition.
.light {
--background: whitesmoke;
--color: #333;
}.dark {
--background: #333;
--color: whitesmoke;
}section {
background: var(--background);
}h1 {
color: var(--color);
}
See it in action: https://codepen.io/koralarts/pen/OepjvB
With this separation of concerns, we can move our light and dark variable definitions into different files.
styles/
styles.css
theme.dark.css
theme.light.css
