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

Question

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

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

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

Answer 1

有一个网站，专门做颜色命名的，大家都遵循这个规范的话，应该会好很多

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

另外，我觉得应该是两种结合的，颜色可以作为变量来命名

Answer 2

我的想法是：让设计师参与到前端构建流程中

用 CSS 预处理器，把所有色值全部放在一个文件里，比如 color.scss，这个文件就交给设计师维护了，命名的事也都让设计去操心。
设计师在交付设计稿标注时，也用颜色名去标注，而不是色值。

这么做有三个优点：

• 有一个文件记录了部件的色值定义，有利于设计师自己保持设计的一致性和对项目 UI 整体颜色的把控

• 前端代码效果的一部分交给了设计去控制，当设计师想对项目的颜色进行调整时，不用找程序员去改代码，直接修改完自己的 color.scss，免去了沟通成本

• 程序员减少了阅读成本（在标注稿上读六个字母，再写到编辑器里，这方面我是很担心出错的，每个色值至少对比两遍才放心）

实际操作时，程序员要注意自己的代码里不能出现色值，保证自己的颜色都引用自 color.scss，这是坠吼的。

Answer 3

建议用第一种，我反正用的第一种。
第二种太过语义化，如果我仅仅是想用红色，似乎跟error没关系对吧~

Answer 4

我是用第一种,如果像white black这些简单三个重复的我就用重复的部分命名：

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

如果像你说的red 我就在后面加1，2，3...：

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

Answer 5

用第一种吧，颜色只是你加的一个类，所以不会影响语义，你可以给ERROR加样式，只是颜色直接用单独给，这样颜色的重用性也高

Answer 6

第一种不错不错 学习了

Answer 7

分情况讨论吧：整体来说命名偏向于语义化。
第一种：如果你采用less,scss这种预编译处理，建议使用placeholder去替换，如果没有，也确实存在这种复用的情况，那就建议采纳这种原子性的命名方式。

第二种： 如果像错误信息，提示信息，警告信息这种的，还是使用语义化命名吧。

Answer 8

推荐用less

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

Answer 9

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

Answer 10

这里有解决方法：https://wubin.design/articles...