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

Abbreviation	Meaning	Example
txt	text color (color in CSS)	--btn-txt
bg	background color	--inp-bg
bdr	border color	--inp-fcs-bdr
rds	border radius	--inp-rds
hvr	:hover	--btn-hvr-txt
fcs	:focus or :focus-visible	--inp-fcs-bdr
actv	:active	--btn-actv-txt
err	error state	--inp-err-hvr-bdr
inp	(text) input	--inp-hvr-bg
btn	button	--btn-actv-bg

I also suggest consistently naming variables in the following order:

1. Specific module targeted, if applicable (inp, btn), or skip this for a global default (page background color is just --bg)

2. Variant of the module being targeted (small, secondary, dangerous), if applicable

3. Long-term state modifiers, if applicable (err)

4. Short-term state modifiers, often tied to CSS pseudoclasses, if any (hvr, fcs)

5. Property being set (txt, bdr)

This ordering is demonstrated in every example in the table above.

History

Shortly after publication, bg-clr, txt-clr, bdr-clr, and bdr-rds were simplified to bg, txt, bdr, and 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 background or border value in a variable, you can simply use the non-abbreviated spelling.

Feedback

Your thoughts are welcome! Was this useful? Is there something you would change? Use my contact form.

Share

Try introducing this to your teammates or sharing it with someone else who works with CSS!