Metric CSS is a pain point

[christianbundy]

What's the problem you want to solved? I thought the metric-derived CSS variables were cute and fun, but I tried to edit the CSS today and I couldn't remember whether to use --micro or --milli for half-size. Boo.

Is there a solution you'd like to recommend? Maybe we should just do:

:root {
  --three: calc(var(--one) * 3);
  --two: calc(var(--one) * 2);
  --one: 1rem;
  --half: calc(var(--base) / 2);
  --third: calc(var(--base) / 3);
  --quarter: calc(var(--base) / 4);
}

This has the nice side-effect of being able to easily change the base, so we could use 1.5rem or the golden ratio or whatever we want in the future without having to memorize quirky variables names. Simplicity!!!!!

[Powersource]

A convention I kind of like is to call it e.g. --size-1 --size-2 etc, makes it easy to switch between different ones and I think they're sorted when autocomplete in devtools suggests them. (:bike::house:)

[georgeowell]

This is quite stale. Did you decide what to do yet?

[christianbundy]

It's old, but it's still a problem that I'd like to resolve.

[christianbundy]

cc: @nickwynja if you have any thoughts