Menu

Argument #1: Specificity in variable names breaks mutability

The 100-900 system often maps to specific lightness values. In HSL, this would be 10% lightness to 90% lightness. And this is a big problem.

Variable: not consistent or having a fixed pattern; liable to change.

Variables are called variables for a reason: they’re placeholders for values that might need to change. So, why would we want the variable’s name to reference some sort of fixed value?

Almost everyone can agree that var(--red) is bad because we’re now stuck with a variable that must have a red value, or else we introduce chaos into the design system.

So, instead of red, we use a name like “primary” because it describes the context in which the color is used and not its actual value.

Much better! Right? Right?

If you agree that’s better, then you can’t immediately propose appending a number value syntax for the shade system. That introduces a very similar problem.

Let’s say I’m using a numbered shade system, and I use var(--primary-200) about 75 times before I realize that it’s not actually light enough. I need a lighter shade, which proponents of the numbered system would suggest I switch to var(--primary-100).

Assuming that var(--primary-100) actually works for what I need, I now have to replace all instances of var(--primary-200) with var(--primary-100), which isn’t a trivial task in a page builder. And even if I accomplish that, I’m still left with a var(--primary-200) that we just decided isn’t really applicable to this project.

We can explore half a dozen tangents here, but the main point is this: if I have to replace the variable instead of changing its value, didn’t I name it poorly?

Once again, the point of a variable is that its value may change. If a variable can’t support a value change because of its name, hasn’t the train run off the tracks at that point?

Argument #2: What’s the variable name for the actual color (versus random shades)?

Let’s say that we have three brand colors for our project: Primary, Secondary, and Base.

You need to deploy each main color. Which variable do you use?

Would you guess:

var(--primary-500)
var(--secondary-500)
var(--base-500)

If so, you’d be wrong.

Share your love

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *