《CSS揭秘》第1章-CSS规范与编码技巧

CSS规范

CSS规范由CSS工作组的成员编写，CSS工作组成员组成：

W3C 会员公司的成员（88%）
特邀专家（7%）
W3C 工作人员（5%）

每项规范从最初启动到最终成熟，都会经过以下阶段。

编辑草案（ED）
首个公开工作草案（FPWD）
工作草案（WD）
候选推荐规范（CR）
提名推荐规范（PR）
正式推荐规范（REC）

CSS 是被打散到多个不同的规范（模块）中，每个模块都可以独立更新版本。这其中，那些延续 CSS 2.1 已有特性的模块会升级到3这个版本号。
此外，如果某个模块是前所未有的新概念，那它的版本号将从 1 开始。

最常见的前缀分别是：

Firefox 的 -moz-
IE 的 -ms-
Opera的 -o-
Safari 和 Chrome 的-webkit-

CSS编码技巧

尽量减少代码的重复

代码易维护 vs. 代码量少
代码易维护和代码量少不可兼得。

//一行代码，修改时可能需要修改三个地方
border-width: 10px 10px 10px 0;

//两行代码，修改更容易
border-width: 10px; 
border-left-width: 0;

currentColor

继承

小箭头能够自动继承背景和边框的样式

    .callout{
        position:relative;
    }
    
    .callout:before{
        content:'';
        position:absolute;
        top:-.4em;left:1em;
        padding:.35em;
        background:inherit;
        border:inherit;
        border-right:0;
        border-bottom:0;
        transform:rotate(45deg);
    }
    ```     
        
- 相信你的眼睛，而不是数字
- 关于响应式网页设计
    1. 每个媒体查询会增加成本
    2. 尽最大努力实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸
        1. 使用百分比长度来取代固定长度
        2. 当你需要在较大分辨率下得到固定宽度时，使用`max-width`而不是`width`
        3. 不要忘记为替换元素（比如img、object、video、iframe等）设置一个`max-width`，值为100%
        4. 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，`background-size: cover`这个属性都可以做到
        5. 当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定列的数量。`Flexbox`或者`display: inline-block`加上常规的文本折行行为
        6. 在使用多列文本时，指定`column-width`（列宽）而不是指定`column-count`（列数）
- 合理使用简写
    1. 展开式属性与简写属性的配合使用是非常有用的

background: url(tr.png) top right,

url(br.png) bottom right,
url(bl.png) bottom left;

background-size: 2em 2em;
background-repeat: no-repeat;

冷静合理引入预处理器
1. 在每个项目开始时使用纯 CSS，只有当代码开始变得无法保持 DRY 时，才切换到预处理器的方案。