Let's consider, I have a color palette (5 colors, from coolors.co). My question is, how to efficiently and cleanly use these colors from CSS (or SCSS).

As I browse sources of websites, they do have encoded CSS (classes are hashes) and it is hard to read at all.

Here are my requests for the functionality:

• be able to painlessly change the colors in the palette for the entire page, if needed during development

My ideas on how to achieve it:

Here are my thoughts on how I would do it, but none of them seem clean to me.

1) through HTML

So, in, let's say colors.scss, state stuff such as:

html{
   background: black
}
h1, h2{
   color: red
}
p{
color: white 
}

The drawback is, that every overlay absolute positioned window will have to have defined the background aswell (through class), and generally, these styles just can not suffice, as you will anyway have to define exceptions through classes.

2) through classes

So, define classes like color-primary, color-secondary, color-tertiary and then at each item, add such a class, which is, however, dirty. On the other hand, that definition of colors will sit in one place (.css file) and that is good practice for us coders.

3) Use mixins in scss

I am aware of how mixins work, but I feel, though it could be accomplished through mixins, that it is an unnecessary complication.

So my question is, how these color schemes and palettes are handled in practice? Where to define the 5 colors, and how to distribute them through entire HTML project, using CSS or SCSS (SASS)?

CodePudding user response：

so let's break down your ideas:

1. using the HTML tags - it is very not customizable. Eventually, you have a limited number of tags you will use, and probably you wouldn't want them all to look the same.
2. classes - it could work, but it is not so easily implemented, and will make your code harder to read and debug (and less pretty), so basically not a good practice
3. mixins, I can't see how mixins will help you accomplish that. They are used more as top-level statement containers or used to reuse classes, and as per my second point, we wouldn't want that.

My Suggestion -

Usually, in my developing process, I have a variables.scss file that includes all of my global variables, and I declare local variables next to the classes that they are in. you can read more about it here, and about variables naming conventions here and also here.

But the logic behind using variables is to make your code more readable because you would have variables named like: title-level-1, and it would be making your UI more consistent.

if you would instead use CSS-variables, you can read more here and here