CSS Variables and Properties yet

Excerpt

More programming in CSS.

I love SCSS as a CSS language that is adding some syntax to the well known CSS. However all functions are evaluated and all variables are resolved to constants in the compiled result. Changing a SCSS variable at runtime is not working becaus all is limited to the capabilities of CSS.

With the CSS variables (I call them variables because of the var() function) it is possible to change the value of a variable that will be then applied to the defined CSS rules where the variable is referred.

How it works

The interesting thing about the CSS variable is that they can be defined on the root and can be overwritten by elements. The closes parent element that holds a value on that variable will define the actual value.

The feature is also available on inline style on HTML Elements.

CSS definition

The CSS definition in the <style> tag in the page header is defining the following rules (excerpt):

:root {
  --back-color: yellow;
}

body {
  --back-color: pink;
}

.card {
  --back-color: lime;
}

HTML Elements

This is a <div> element inside the body using background-color: var(--back-color). It results in pink as the yellow on the root element is overwritten by the more closer rule on the <body> element.

div element using --back-color

This is a <div> element inside a .card element also using background-color: var(--back-color). It results in a lime background as the yellow and pink on the <html> and <body> is overwritten by the .card rule on the .card element.

div element inside a card using --back-color

This the same as before but there is a style="--back-color:silver" definition on the .card element. This show how to overwrite a variable using a HTML inline style.

div element inside a card with local defined --back-color

Press + or + to view the source code.

API

The variables can be read and modified on the style attribute of the HTML element. Just use style.getPropertyValue(name) and style.setProperty(name, value).

Avoid naming conflicts

In many implementations I have observed the variable names are somehow prefixed to avoid that components from a library cashes another library because they both use the same variable name.

Using a name like --libname-back-color is advised.

My Comments

I use the CSS variables only for values that change during runtime. Using it instead of SCSS variables I cannot recommend as it will blow up the size of your CSS code. As your web site likely doesn't have to support dynamic theming SCSS approaches still have better support e.g. using linting tools to find typos or undeclared variables.

In case you implement a web application that may be used in companies other than yours you may like to implement theming support. Here the variables offer a great place of defining the theme properties like colors in a central place. However in great CSS frameworks I do not find this impelement in a good way. I can find code like this using variables without a semantic value (from bootstrap):

--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;

In other applications you can find better approaches where UI elements can be styled using variables with semantic (from Monaco = vscode editor):

.hc-black .monaco-custom-checkbox:hover{border:1px dashed var(--vscode-focusBorder)}

A impressive set of variables that can be modified in theming can be found in the vscode documentation.