CSS 颜色值规范革命・去洁癖化#

由于历史原因，古代前端开发写 CSS 为了统一大小写，和节省网络流量，定义 CSS 颜色值的规范如下：

1. 和所有 CSS 值保持一致，统一使用小写字符；
2. 为了尽量节省流量传输，能用 3 位简写的统一用 3 位简写。

1background-color: #eee;
2color: #666;

这在古代没有生产力工具的情况下，主要通过人肉来保障执行这些规范，老一辈前端忍耐力很好，逐渐习惯了这一约定。目前绝大部分仓库都沿用这一规范。

随着生产力的发展，前端早已不直接书写 CSS 代码，而是类似 less，sass 之类的上层语言，代码可读性和可维护性才是最重要的，但颜色值还继续延续着古老的传统。

这些扭曲人性的古老传统，其阻碍可读性和可维护性的影响越来越突出。

可读性：大写字符具有更好的可读性。

1- color: #eee;
2+ color: #EEE;
3
4- color: #ffffff;
5+ color: #FFFFFF;

可维护性：

• 新增：Sketch 里复制和生成出来的颜色值都是 6 位大写字符的，何苦要人肉改成 3 位小写；
• 修改：一个 原本 6 位颜色（例如 #FFFFFE 改为 #FFFFFF）后，为了所谓洁癖要人肉改成 3 位（#FFF）；反之亦然，修改一个 3 位的可能也需要改成 6 位，都是不必要的体力劳动。

新增示例：（即使是 Vim 编辑器之神，也需要 viwu3x 或 ciwfff 这么多键来完成修改。）

1- color: #FFFFFF;
2+ color: #fff;

修改示例：

1- color: #FFFFFF;
2+ color: #fff;

代码是写给人看的，顺便给机器执行。

简写 3 位的方式来减少体积这是编译工具考虑的事情，给人看的代码不要削足适履。

我建议 CSS 颜色值规范：

1. 建议书写完整的 6 位；

2. 建议大写。不限制大小但同一值大小写相同也行。

Category: Technology

Tags: CSS

Published on 2021-07-30