html - css中怎么命名颜色比较好？

Question

比如#ff0000,我该是用具体的颜色名来命名呢，还是用语义来命名呢？
1.用颜色名命名: .c-red{color:#ff0000;}
优点：是什么颜色一眼就能看出来，并且html中可以到处复用
缺点：如果我要修改#ff0000为#faf703(黄色)，那么c-red和颜色值就对不上了 ，而且如果我有多个红色的时候不好区分。

2.用语义命名: .error{color:#ff0000;}
优点：改色值的时候不会影响语义
缺点：不能到处复用，可能会需要定义多个相同色值的语义类

我觉得这两种方式都有一定的局限性，不知道大家在工作中会怎样定义颜色的类名呢？

Answer 1

There is a website that specializes in color naming. If everyone follows this standard, it should be much better

http://chir.ag/projects/name-...

In addition, I think it should be a combination of the two, and the color can be named as a variable

Answer 2

My idea is: Let designers participate in the front-end construction process

Use a CSS preprocessor to put all color values ​​in one file, such as color.scss. This file is left to the designer to maintain, and the naming is left to the designer to worry about.
When designers deliver design drafts, they also use color names instead of color values.

This has three advantages:

• There is a file that records the color value definition of components, which helps designers maintain design consistency and control the overall color of the project UI

• Part of the front-end code effect is left to the designer to control. When the designer wants to adjust the color of the project, he does not need to find a programmer to change the code, he can directly modify his own color.scss, eliminating the need for Communication cost

• Programmers reduce reading costs (read six letters on the annotation manuscript and then write it in the editor. I am very worried about making mistakes in this regard. I compare each color value at least twice before I feel confident)

During actual operation, programmers should pay attention to the fact that color values ​​cannot appear in their code and ensure that their colors are referenced from color.scss. This is a mistake.

Answer 3

It is recommended to use the first one, I use the first one anyway.
The second one is too semantic. If I just want to use red, it seems to have nothing to do with error, right~

Answer 4

I use the first one. If there are three simple repetitions like white and black, I will use the repeated part to name:

.black{color:#000}
.black6{color:#666}
.blackbg{background:#000}
.black6bg{background:#666}
.white{color:#fff}
.whitee{color:#eee}
.whitebg{background:#fff}
.whiteebg{background:#eee}

If it’s red like you said, I’ll add 1, 2, 3...:

.red{color:red}
.red1{color:#ff0000;}
.red2{color:#ff0001;}/*随便写的我不知道是不是红色系，反正就这个意思*/

Answer 5

Use the first one. The color is just a class you add, so it will not affect the semantics. You can add a style to ERROR, but just use the color separately, so the reusability of the color is also high

Answer 6

The first one is pretty good, I learned it

Answer 7

Let’s discuss it on a case-by-case basis: Generally speaking, naming tends to be semantic.
First type: If you use pre-compilation processing such as less and scss, it is recommended to use placeholder to replace it. If not, and this kind of reuse does exist, then it is recommended to adopt this atomic naming method.

Second type: If it’s like error messages, prompt messages, warning messages, etc., it’s better to use semantic naming.

Answer 8

Recommended to use less

@textRed: #ff0000;
.classA {
    color: @textRed;
}

Answer 9

.bg-black{
    background: #333;
}
.bg-gray{
    background: #999;
}
.text-gray{
    color: #999;
}
...