Color name management

[Takazudo]

Hi Ben. I have a question about color name management.

You wrote that color names and concrete pixel numbers (like magic numbrers) should be stored into variables using PostCSS, Sass or something like that.

I feel that it's pretty hard to manage color names in concrete project. It always go massive variable set.

Can I see any example about color name variables?

[benfrain]

Hi @Takazudo - sure. As ever, this depends what you are trying to achieve. However, if you have an interface and say you want to limit devs to only using fonts that are even (10px, 12px, 14px etc) then you could guide them in this by making them pick from the text variables (you could also use tooling to enforce if you felt it was important enough). For example, text vars might look like this:

/* Allowed text sizes defined below. Please comment any exceptions in the code */
$text10: 10px;
$text12: 12px;
$text14: 14px;
$text16: 16px;
$text20: 20px;
$text24: 24px;

Meanwhile, with colours there are two main approaches that spring to mind. Controlling the UI and theming. If you want to control the UI (much like the text example above) you might do something like this (I name them like this so there is no ambiguity as to what the var is and what the general colour should be):

$color-grey-54: #545454;
$color-grey-a7: #a7a7a7;
$color-orange-ff: #ff9900;
/* More colors */

You don't gain anything in terms of developer convenience this way, but you do gain UI consistency in your product by making devs/designers only pick from this set. You can then police any additions and perhaps use something like CSS Color Guard https://github.com/SlexAxton/css-colorguard to prevent too many similar colours working there way in.

The alternative approach is theming. For example, suppose you want to create a set of components that are structurally similar but coloured differently. In this respect you might go:

$color-brand: #999999; /*whatever*/
$color-brand-alt: #ff9900; /*whatever */
$color-warning: #ff0000; /*whatever*/
/* etc */

And then change the values for each variable from project to project.

As ever, it depends upon the size of the project and whether you think it is actually worth implementing. No point solving problems you don't have. ;)

Does that answer your question fully?

[Takazudo]

@benfrain Thank you for the detailed reply. Your comment helped me so much!

I knew the approaches that you told me. But these two were mixed in my mind. You made me realized that these two approaces should be thought as separated!

I think the theming approach needs the design for how to manage colors in the project before concrete design and coding process. It's a kind of challenge about design and coding, I guess.

Thank you Ben!