CSS Variables That Mimic Chameleons

This post continues the theme from Immortal CSS Classnames, in which names based on purpose instead of appearance tolerate visual change. The same premise applies to naming CSS variables, and any visual tokens for that matter (such as the JSON found in design systems).

CSS variables can have different values in different contexts which makes naming them even harder and more important.

Chameleons ≈ CSS variables #

Chameleons change colour in different conditions in order to camouflage, regulate body temperature, or signal intent to fellow chameleons. CSS variables are equally changeable during a rebrand, theming, white-labelling, and light or dark modes.

This means a variable name should not be coupled to a single context, otherwise the name becomes nonsensical in other contexts. For example, the variable --white-bg works well in light mode, but looses all meaning in dark mode.

Example variables #

Lets look at 4 CSS variables (used on this site) to demonstrate how a deliberate attention to naming things leads to long-term expressiveness and flexibility.

The variables are:

accent

a vivid colour used in moderation that adds visual interest and personality

foreground

in regards to depth perception, the foreground is the visual pane closest to the viewer

background

the visual pane furthest from the viewer

middleground

the visual pane that sits between the foreground and background

Note that each variable name bares no relation with how it looks. The colours can be consumed by any component, composition or context, and are future-proofed against visual change such as a rebrand, and even yet to be supported CSS features.

This naming abstraction tolerates and welcomes theming and white-labelling. If I wanted to launch a Chinese specific version of this site I may be inclined to change the accent colour to red.

Furthermore the integrity of each variable name is preserved regardless of the systems prefers-color-scheme. In other words the variable names stay meaningful in both light and dark mode.

The same applies to other system settings such as the experimental prefers-contrast and prefers-reduced-transparency. A users request of higher contrast could be honoured with:

@media (prefers-contrast: high) {
  :root {
    --middleground: #e9eaf1;
  }
}

Key takeaways #

• CSS variables can have different values in different contexts
• Variable names should not be coupled to a specific context
• Choose names that describe purpose instead of appearance