### Web标准：是敌还是友
* W3C 并不“生产”标准，只是设定了相应的的规则，监督规范生成的整个进程。CSS 规范通常是由 CSS 工作组的成员来编写的。分别来自W3C 会员公司的成员（88%），特邀专家（7%）和W3C 工作人员（5%）。**对于哪些东西该进入标准，浏览器厂商比W3C 有更多的发言权**。
* 制定标准并不是闭门造车，CSS 工作组坚持透明原则，内部的所有交流都是公开的，并邀请公众的关注和参与。
* 每项规范从最初启动到最终成熟，都会经过以下阶段：
> 1. 编辑草案（ED）
> 2. 首个公开工作草案（FPWD）
> 3. 工作草案（WD）
> 4. 候选推荐规范（CR）
> 5. 提名推荐规范（PR）
> 6. 正式推荐规范（REC）
* CSS 1的规范发表于1996年，非常短且简单。CSS 2 发表于1998年，它的定义更加严格且囊括了更多的功能。
* 在 CSS 2之后，CSS 工作组意识到这门语言已经变得非常庞大，再也无
法把它塞进单个规范中了。这样不仅阅读和编辑极其困难，而且限制了CSS
本身的快速发展。因此，**他们将CSS 打散到多个不同的规范（模块）中，
每个模块都可以独立更新版本**。
* 延续已有特性的模块会升级到3这个版本号。比如以下模块：
> - [CSS语法](http://w3.org/TR/css-syntax-3)
> - [CSS层叠与继](http://w3.org/TR/css-cascade-3)
> - [CSS颜色](http://w3.org/TR/css3-color)
> - [选择符](http://w3.org/TR/selectors)
> - [CSS背景与边框](http://w3.org/TR/css3-background)
> - [CSS值与单位](http://w3.org/TR/css-values-3)
> - [CSS文本排版](http://w3.org/TR/css-text-3)
> - [CSS文本装饰效果](http://w3.org/TR/css-text-decor-3)
> - [CSS字体](http://w3.org/TR/css3-fonts)
> - [CSS基本UI特性](http://w3.org/TR/css3-ui)
* 如果某个模块是前所未有的新概念，那它的版本号将从1开始。比如下面这些：
> - [CSS变形](http://w3.org/TR/css-transforms-1)
> - [图像混合效果](http://w3.org/TR/compositing-1)
> - [滤镜效果](http://w3.org/TR/filter-effects-1)
> - [CSS遮罩](http://w3.org/TR/css-masking-1)
> - [CSS伸缩盒布局](http://w3.org/TR/css-flexbox-1)
> - [CSS网格布局](http://w3.org/TR/css-grid-1)
* 实际上没有任何规范中定义了**CSS3** 这个名词。**通常我们所说的CSS3 指的是一个非正式的集合，包括CSS 规范第三版（Level 3）再加上一些版本号还是1 的新规范**。
* **浏览器前缀**（Vendor Prefix）是一些放在CSS属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。主要是各种浏览器用来试验或测试新出现的属性特征。当需要使用浏览器引擎前缀时，最好是把带有各种前缀的写法放在前面，然后**把不带前缀的标准的写法放到最后**。通常我们不在代码里直接写带有浏览器前缀的属性，而是**通过工具如Autoprefixer在项目构建阶段自动添加**。浏览器前缀被认为是一场史诗般的失败。因此浏览器厂商已经通过配置开关取代前缀的方式来实验性地实现新特性了。
> - -moz- /* 火狐等使用Mozilla 浏览器引擎的浏览器 */
> - -webkit- /* Safari, Chrome 等使用Webkit引擎的浏览器 */
> - -o- /* Opera 浏览器(早期) */
> - -ms- /* Internet Explorer */
### CSS 编码技巧
* 代码可维护性的最大要素是**尽量减少改动时要编辑的地方**。灵活的CSS 不仅容易修改，也更容易扩展。
* 当某些值相互依赖或存在一定关系时，应该把它们的**相互关系用代码表现出来**。常见的如间距、行高等和字体大小有关时，应通过一些相对长度单位来设置它们如em, ex, % 等。
* **有的时候代码易维护性和代码量少不可兼得**。例如
``` css
border-width: 10px;
border-left-width: 0;
```
要优于
``` css
border-width: 10px 10px 10px 0;
```
* 灵活运用CSS 中有史以来的第一个变量[**currentColor**](https://theblog.adobe.com/extending-the-color-cascade-with-the-css-currentcolor-variable/)。
* 通常尺度精准的设计并不符合我们视觉的精准度，而这个时候需要**以视觉精准度为准**去调整。例如垂直居中，上下左右的边距。
* 媒体查询（Media Query）是实现实现响应式网页设计（Responsive Web Design，RWD）的常用方法，但是我们**不应该过度依赖媒体查询**，因为每次查询不能以一种连续的方式来修复问题，并且添加的媒体查询代码越多，后期的维护和修改就会越费力。而应该**以实现弹性可伸缩的页面的思路去写CSS 代码**，只需要在媒体查询的各个断点区间内指定相应的尺寸，并且媒体查询的断点不应该由具体的设备来决定，而应该根据设计自身来决定。
> - 使用百分比长度或与视口相关的单位（vw、vh、vmin 和vmax）来取代固定长度。
> - 当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。
> - 不要忘记为替换元素（比如 img、object、video、iframe 等）设置一个max-width，值为100%。
> - 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，background-size: cover 这个属性都可以做到。
> - 当图片或其他元素以行列式进行布局时，让视口的宽度来决定列的数量。Flex布局或者display: inline-block加上常规的文本折行行为都可以实现这一点。
> - 在使用多列文本时，指定 column-width（列宽）而不是指定column-count（列数），这样它就可以在较小的屏幕上自动显示为单列布局。
* **合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险**。当然，如果我们要明确地去覆盖某个具体的展开式属性并保留其他相关样式，那就需要用展开式属性。例如：
```
background: red;
background-color: red;
```
前者是简写，它可以确保你得到red 纯色背景；但如果你用的是展开式的单个属性（background-color），那这个元素的背景最终有可能会显示为一个粉色的渐变图案、一张猫的图片或其他任何东西，因为同时可能会有一条background-image 声明在起作用。
* **在引入预处理的问题上需要冷静决策**，不应该在每个项目一开始时就不动脑筋顺着惯性来。因为使用预处理器可能会使CSS 的文件体积和复杂度增加、增加调试难度（通过SourceMap解决）、在开发过程中存在一定的延时、需要学习成本、预处理器本身会存在bug 等。**很多受预处理器启发的特性都已经以各种方式融入到原生CSS 中了**。建议在每个项目开始时使用纯CSS，只有当代码开始变得无法保持DRY 时，才切换到预处理器的方案。
