Abbreviations in Color Variable Names
Now that we can rely on browsers to support CSS variables, we can define and use color themes by simply defining role-based color name variables. (For example, that is what powers this dark mode demo, although the naming scheme here isn’t used.)
My humble suggestion is to use the following conventions. They attempt to maximize terseness, consistency, and predictability. YMMV
||text color (
||:focus or :focus-visible||
I also suggest consistently naming variables in the following order:
Specific module targeted, if applicable (
btn), or skip this for a global default (page background color is just
Variant of the module being targeted (small, secondary, dangerous), if applicable
Long-term state modifiers, if applicable (
Short-term state modifiers, often tied to CSS pseudoclasses, if any (
Property being set (
This ordering is demonstrated in every example in the table above.
Shortly after publication,
bdr-rds were simplified to
rds, given the color-focused nature of these variables overall and the redundancy of the
clr portion. Yes, a border can include more than color, but need that be captured in a variable? Not really for theming, right? If you do need to capture an entire
border value in a variable, you can simply use the non-abbreviated spelling.
Your thoughts are welcome! Was this useful? Is there something you would change? Use my contact form.
Try introducing this to your teammates or sharing it with someone else who works with CSS!