2018-11-27

1、代码DRY原则：Don't repeat yourself.
2、不在代码中到处使用!important来打补丁
3、深入理解选择符优先级、继承和层叠机制，了解盒模型各个部分，不会为外边距重叠而头疼。
4、浏览器前缀：
某个特性已经得到浏览器的支持，但是不同浏览器有细微的差别，绝大多数情况下可以通过同时使用各种不同的语法，最终通过层叠机制来确保哪条声明起作用。但是要注意，把标准写法放在最后，如下图：

浏览器前缀

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

注:Firefox 的 -moz-、IE 的 -ms-、Opera 的 -o- 以及 Safari 和 Chrome 的 -webkit-

5、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)

6、把长度值都改成 em 单位，效果的值就都变成可缩放的了，而且依赖字号进行缩放。按照这种方法，我 们就可以在一处控制按钮的所有尺寸样式了:

padding: .3em .8em;

7、继承：
inherit 可以用在任何 CSS 属性中，而且它总是绑定到父元素的计 算值(对伪元素来说，则会取生成该伪元素的宿主元素)

input, select, button { font: inherit; }
a { color: inherit; }

.callout::before { 
position: absolute;
top: -.4em; left: 1em; 
padding: .35em; 
background: inherit; 
border: inherit; 
border-right: 0; 
border-bottom: 0;
 transform: rotate(45deg);
}

8、弹性布局之em
em对照表：

emTable.png

em计算公式：
1 ÷ 16px × 960px = 60em

9、响应式网页设计（Responsive Web Design，RWD）
媒体查询规则：
在以后的改动中，每个媒体查询规则都会增加新的成本，这种成本是不应轻易增加的。未来每次对 CSS 代码的修改都要求我们逐一核对这些媒 体查询是否需要配合修改，甚至可能要求我们反过来修改这些媒体查询的设 置。这一点常常被我们忽略，后患无穷。你添加的媒体查询越多，你的 CSS 代码就会变得越来越经不起折腾。这并不是说媒体查询是一种不良实践。只要用对了，它就是利器。但 是，你只应该把它作为最后的手段。比如你想把网站做得弹性灵活，但其他 尝试全都失败了;或者我们希望在较大或较小的视口下完全改变网站的设计 形态(譬如，把侧栏改成水平布局)。我这么说的原因在于，媒体查询不能 以一种连续的方式来修复问题。它们的工作原理基于某几个特定的阶梯(亦 称“断点”)，如果大部分样式代码并不是以弹性的方式来编写的，那么媒体 查询能做的只是修补某个特定分辨率下的特定问题——这本质上只是把灰尘 扫到地毯下面而已。媒体查询的断点不应该由具体的设备来 决定，而应该根据设计自身来决定。

10、合理使用简写
以下两行 CSS 代码并不是等价的:
background: rebeccapurple;
background-color: rebeccapurple;
前者是简写，它可以确保你得到 rebeccapurple 纯色背景;但如果你用的是展开式的单个属性(background-color)，那这个元素的背景最终 有可能会显示为一个粉色的渐变图案、一张猫的图片或其他任何东西，因为 同时可能会有一条 background-image 声明在起作用。在使用展开式属性的 写法时，通常会遇到这样的问题:展开式写法并不会帮助你清空所有相关的 其他属性，从而可能会干扰你想要达到的效果。

合理使用简写 是一种良好的防卫性编码方式，可以抵御未来的风险。当然，如果我们要明 确地去覆盖某个具体的展开式属性并保留其他相关样式，那就需要用展开式 属性