比如#ff0000,我该是用具体的颜色名来命名呢,还是用语义来命名呢?
1.用颜色名命名: .c-red{color:#ff0000;}
优点:是什么颜色一眼就能看出来,并且html中可以到处复用
缺点:如果我要修改#ff0000为#faf703(黄色),那么c-red和颜色值就对不上了 ,而且如果我有多个红色的时候不好区分。
2.用语义命名: .error{color:#ff0000;}
优点:改色值的时候不会影响语义
缺点:不能到处复用,可能会需要定义多个相同色值的语义类
我觉得这两种方式都有一定的局限性,不知道大家在工作中会怎样定义颜色的类名呢?
我的想法是:让设计师参与到前端构建流程中
用 CSS 预处理器,把所有色值全部放在一个文件里,比如 color.scss,这个文件就交给设计师维护了,命名的事也都让设计去操心。设计师在交付设计稿标注时,也用颜色名去标注,而不是色值。
这么做有三个优点:
有一个文件记录了部件的色值定义,有利于设计师自己保持设计的一致性和对项目 UI 整体颜色的把控
前端代码效果的一部分交给了设计去控制,当设计师想对项目的颜色进行调整时,不用找程序员去改代码,直接修改完自己的 color.scss,免去了沟通成本
程序员减少了阅读成本(在标注稿上读六个字母,再写到编辑器里,这方面我是很担心出错的,每个色值至少对比两遍才放心)
实际操作时,程序员要注意自己的代码里不能出现色值,保证自己的颜色都引用自 color.scss,这是坠吼的。