Intermediary Classes

One more example to demonstrate the usefulness of the unpacking prefixes, and then we'll move on.

Suppose you have a design system that's set up something like this:

:root {
   --color-blue-100: hsl(240, 50%, 10%);
   /* ... */
   --color-blue-900: hsl(240, 50%, 90%);
}

.primary {
   --color-background: var(--color-blue-100);
   --color-text: var(--color-blue-900);
}

.normal {
   background-color: var(--color-background);
   color: var(--color-text);
}

.invert {
   background-color: var(--color-text);
   color: var(--color-background);
}

Here we're using an intermediary utility class to set values which .normal and .invert will use, which allows us to define our elements with classLists like "primary normal" or "secondary invert". If we were to directly reference the color tokens, we would need to create many more classes. And every time we added a new color category, such as success, warning, error, tertiary, highlight, accent etc. then we would need to add both normal and invert classes for each.

Now, here's how we can use prefixes to quickly build a component using these classes.

/* _primary normal */
--_color-background: var(--color-background, var(--color-blue-100));
--_color-text: var(--color-text, var(--color-blue-900));
--_background-color: var(--color-text);
--_color: var(--color-text);
background-color: var(--_background-color);
color: var(--_color);

Now you have a component that will default to the primary normal state, but that is still 100% configurable from its outside context. And we just wrote a LOT of css with very little effort.