在开发中，经常会有一些棘手的样式处理，比如复杂的渐变或动画，不规则的投影或图形，也有以前不支持的效果，现在可以实现，或在未来将会实现。而我们就有必要了解最新 CSS 的精髓 —— CSS 揭秘，这本书的核心目的就是如何使用 CSS 解决难题。

我是很喜欢研究 CSS 有关的技术，所以希望这本书在我看完后，也可以分享出来，每个篇章我都会自己再做理解和整理，尽量可以更简洁的把解决问题的过程给说直白易懂，就跟做数学题一样，只有理解过程，才能在遇到类似的问题后习惯的解决，否则只是知其然而不知其所以然，这种授人以鱼的肯定不是我们学习的目的，我们要的是学“渔”而非要“鱼”。

前言

CSS 经过多年发展，已经从一个简单样式语言，到现在成为一项由 80 多项 W3C 规范定义的复杂技术，建立起了独自的生态圈，专用的框架。甚至没人敢说精通 CSS 所有方面，连接近这个程度都很困难。

在以前，CSS 经常要做兼容处理，不同浏览器不同的 bug 和相应的对策，决定是否是 CSS 高手的体现。而现在的浏览器都是以相同的 Web 标准作为设计基准的，虽然兼容性还是存在，但是浏览器的迭代速度越来越快，原先的兼容性问题很可能在下个浏览器版本就不存在了。

所以如今 CSS 的代码开发需的是更 DRY ，可维护，灵活性。

ps：DRY，Don't Repeat Yourself，意思就是不要重复你自己已经做过的事。这个理念，是为了提升代码的可维护性：在改变某个参数时，做到只改尽量少的地方。

引言

标准的制定过程

虽然了解 Web 标准对我们代码编写没有什么帮助，但是会让我们更好的理解 CSS，知道为什么一些属性现阶段还未发布，但却可以供开发者来尝试使用。

我们所说的 W3C 标准，并不是由他们创建标准，而是汇集相关各方来整合起来，最终由他们发布标准。W3C 会设定整个平台的规则，进行监督，但是规范基本上并不是由 W3C 来完成。

CSS 规范通常是由 CSS 工作组来编写的。在 CSS 揭秘这本书编写时（2015出版），这个工作组有 98 名成员，人员结构如下：

86 名来自 W3C 会员公司的成员（88%）
7 名特邀专家（Lea Verou 也是其中一员）（7%）
5 名 W3C 工作人员（5%）

可以看到基本都是来自于 W3C 会员公司，现在 W3C 已由 440 家会员（截止 2021.07.14 ），像我们国内的腾讯，360，阿里，百度，华为，字节等都是其中会员，还有一些大学也是，比如北航，浙大等学校。

当前 CSS 工作组成员已经扩大到有 144 名参与者，现如今的人员结构如下：

124 名来自 W3C 会员公司的成员（86%）
16 名特邀专家（11%）
4 名 W3C 工作人员（3%）

可以看到，相比15年，如今又多了许多参与者，但是来自于 W3C 会员公司的比例几乎没变，他们每年的会费，就是 W3C 的主要资金来源。

每项规范都是从最初启动到最终成熟的，会经历下面几个阶段：

编辑草案（ED）：这是一项规范的初始阶段，在这个阶段是没有要求的，可能会非常粗糙。
首个公开工作草案（FPWD）：一项规范的首个公开发布版本。
工作草案（WD）：会有多个 WD 版本，来吸收工作组以及社区的反馈。
候选推荐规范（CR）：相对稳定的版本。
提名推荐规范（PR）：提出异议的最后阶段，几乎很少在此阶段提出异议。
正式推荐规范（REC）：一项规范的最终阶段。

主要的三个流程是 WD，CR，REC 三个阶段。

WD 是规范的设计阶段，工作组根据内部和外部反馈迭代规范。一旦解决所有已知问题，工作组就会转换工作草案。

CR 是规范的测试阶段，是使用测试和实现来测试规范，这个阶段就是为了发现问题。这个阶段要过渡到下个阶段，每项特性都必须具备两个正确、独立的实现和全面的测试。

REC 是规范的完成状态。

CSS 规范的历史

CSS 1 的规范发表于 1996 年，内容很短，而且比较简单。

CSS 2 的规范发表于 1998 年，定义更严格，也囊括了更多的功能，篇幅也大大增加。

在 CSS 2 之后，这门语言已经变得非常庞大，无法再放入单个规范中，于是 CSS 工作组将 CSS 分开到不同的模块中，每个模块可以独立更新版本。

从 CSS 2.1 已有的模块延续下来的，会升级到 3 这个版本号。

而从前没有的模块，版本号就从 1 开始。

现如今我们常说的 CSS3 ，在实际中是没有再任何规范中定义过，绝大多数指的是非正式的合集，包括 CSS 规范第三版本和版本是 1 的新规范。

浏览器前缀

前面提过，一项正式发布的规范中的每项特新都是要有两个独立的实现和测试，需要开发者去试用，才能确保这些规范在真实的开发中正常使用，但在生产环境还不能用的，我们也很少会去尝试。所以一些实验性的技术被应用到生产时，一旦变动，那原先使用这些规范的就玩完了。

为了解决这个难题，提了很多方案。浏览器前缀就是其一。每个浏览器都有实验性的特性，但是需要前面加上各自的前缀，常见的就是火狐的 -moz-，欧朋的 -o-，IE的 -ms-，谷歌的 -webkit-。这样开发者可以自由的去使用这些加了前缀的特性，使用后的结果反馈到 CSS 工作组，工作组就可以完善这项特性。而最终发布的是没有前缀的，在使用中也就不会跟加前缀的产生冲突，这也就是为什么我们代码会把不带前缀的写最后。

设计很好，但在使用中就会与期望有很大落差，因为这些实验性的属性可以轻易的实现以前大费周章才能达到的效果，甚至以前不能实现的效果，这个时候，这些实验性的属性就无法避免的被滥用。

这个时候我们会发现，在使用新特性时，只写当下有效的浏览器前缀，后面就需要经常回来去维护代码，哪个浏览器实现了该特性，哪个浏览器是不是不需要加前缀，如此就变成了事先加上所有可能的浏览器前缀，再把无后缀的放到最后，就像下面代码：

-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

可 IE 和欧朋浏览器是一开始就试了了无前缀的版本，这样有的声明就是完全多余的。

在最后使用无前缀的属性是为了确保代码阿德向前兼容，这样工作组就无法去修改这些无前缀语法，相当于被开发者去直接决定了这个不成熟的特性。

现在的浏览器厂商已很少用前缀的方式来实现新特性，变成需要通过配置开关来主动启用，谷歌实验性配置(chrome://flags/) ，这样可以有效的防止开发者在生产环境去使用。

CSS 编码技巧

在性能优化的文章中我们也谈到过这些内容，这里就简单再提一下有哪几个方面。

尽量减少代码重复

代码维护性的最大要素是尽量减少改动时要编辑的地方。

代码易维护和代码量不可兼得
CSS 变量
属性继承

视觉误差

视觉上的错觉在任何形式的视觉设计中都普遍存在。

响应式设计
媒体查询
百分比（包括 em，vh等）
flex，grid 等的使用

属性简写

合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。

ps：background 简写需要注意，如果指定 background-size 属性，就必须同时提供 background-position 属性（无论是否是初始值），且要用（/）作为分隔。简单说就是不这样做就可能没办法区分是两者中的哪一个。

预处理器

预处理器的引入需要冷静思考后去决策，只有当使用纯 CSS 代码无法保持 DRY 时，才会考虑切换预处理器的方案，在使用得当时，预处理器才可以让代码更加灵活。

浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端！！！！！欢迎大家来聊，有意向可发送简历到 chen_zhen@dahuatech.com，加入我们，可以一起进步，一起聚餐，一起旅游，让我们从世界村的小伙伴变成大华村的小伙伴。

CSS揭秘——引言

前言

引言