Skip to content Accessibility

CSS Variables That Mimic Chameleons

Choosing CSS variable names that adapt to different contexts.

Published

Categories

The side profile of a predominantly green and brown chameleon.
Chameleons and CSS variables bare closer resemblance than you may think! Photograph by Pierre Bamin.

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.

Top half: in light mode the colour white is assigned to the variable --white-bg. Bottom half: in dark mode the colour black is assigned to the variable --white-bg.
Make sure CSS variable names are not coupled to a specific colour mode. A variable name should make sense in both light and 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.

3 different coloured squares: orange, blue, and green. Above each square is the variable --accent which describes the purpose of the colour. Below each square is a variable named after each colour.
CSS variables named after purpose instead of appearance tolerate visual change. The variable name --accent is decoupled from the colour, which means changing the accent colour has no impact on its identity or consumers. In comparison the variables named after the colour are renamed each time the colour changes.

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.

Top half: in English the --accent colour is orange. Bottom half: in Chinese the --accent colour is redefined to red.
Sensible variable names scale. And international theming is the perfect symbol of scalability. In this example the --accent variable is redefined based on the users (spoken) language.

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.

CSS variable Light mode Dark mode
accent

Vivid orange

Vivid orange

foreground

Dark blue

Off white

background

Off white

Dark blue

middleground

Dark grey

Dark grey

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:

Programming language (abbreviated): css

@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

About the author

I'm Callum, a Front-end Engineer at Nutmeg. Previously I wrote code for KAYAK, American Express, and Dell. Out of hours I publish blog posts (like this one) and tweet cherry-picks.

Feel free to follow or message me at @_callumhart on Twitter.