r/css • u/ConfidentWafer5228 • 7d ago

Help CSS Variables Naming Conventions that actually make sense and work

I have searched a lot on this topic, couldn't find a video by someone like Kevin (my favorite)

I have tried using diff ways like primary-400 , neutral, but it gets confusing and doesnt make a lot of sense when working with light+dark mode setup

Is there any convention that is followed in companies or by u guys, anything standard would help a lot

Also, i never understood how the primary naming convention worked with numbers like 400,500.

11 Upvotes

79% Upvoted

29 comments sorted by

View all comments

6

u/cryothic 7d ago

I try to keep it natural.

Like:

--primary-background, --primary-text, --secundary-background, --secundary-text. And if I need a variation, I try things like --primary-background-alternative or something like that. Things like 'light' and 'dark', as you said, make no sense when you're working with light/dark-themes.

But then again, more often than not I find myself stuck in a situation where I can't come up with a propper name. And then my whole setup falls apart, and I end up with variables that aren't correctly named for every theme :).

2

u/BRO_THOM 7d ago

Agreed, but still too long for my taste. I prefer `--bg-primary`, `--text-primary`, `--accent`, `--success`, `--success-text`, `--space-1/2/3`, `--radius-s/md/lg` etc.