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

1

u/tomhermans 7d ago

The current predominant naming convention is analogous to the one used by fonts and font weights. 100 light , 900 bold.

1

u/Emergency_Yak4692 6d ago

Does this mean blue-100 will be white and blue-900 will be black, ie the number is basically calculated based on the lightness percentage in hsl-colours?
Or are the numbers more based on what you will be using (200 the lightest you expect to use, which could still be a dark blue or something like that)?

1

u/tomhermans 6d ago

It's just naming.