前言：
DRY 是 Don’t Repeat Yourself
第 1 章
尽量减少代码重复
绝对值虽然容易掌控，但想修改的时候会比较麻烦
- 行高要反映出它跟字号
font-size: 20px;
line-height: 1.5;//行高是字号的 1.5 倍
- 字号最好不要定为绝对长度值
如果我们决定把父级的字号加大，就不得不修改每一处使用绝
对值作为字体尺寸的样式。如果改用百分比或 em 单位就好多了
font-size: 125%; /* 假设父级的字号是 16px */
line-height: 1.5;
em和rem的区别
em 和 rem都是灵活、 可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。
- em的特点
-
浏览器默认1em=16px,所以0.75em=12px;
我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; - 字体大小是根据父元素字体大小设置的
- em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性
- 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情
- 这样的情况下,就出现了rem
-
浏览器默认1em=16px,所以0.75em=12px;
- rem特点
- rem的大小是根据html根目录下的字体大小进行计算的
- 当我们改变根目录下的字体大小的时候，下面字体都改变
- rem不仅可以设置字体的大小，也可以设置元素宽、高等属性
- 根元素的字体大小 16px，10rem 将等同于 160px
- 使用 rem 单位的主要目的应该是确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。
HSLA(H,S,L,A)
H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%
A：
Alpha透明度。取值0~1之间。
推 荐 使 用 HSLA 而 不 是RGBA 来产生半透明的白色，因为它的字符长度更短，敲起来也更快。这归功于它的重复度更低
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
例子：https://jsfiddle.net/noyanse/o4v7mvgu/66/
currentColor
从SVG 那里借鉴来的,这个关键字并没有绑定到一个固定的颜色值，而是一直被解析为 color 。实际上，这个特性让它成为了 CSS 中有史以来的第一个变量 。如果你没有给边框指定颜色，它就会自动地从文本颜色那里得到颜色。
例子：假设我们想让所有的水平分割线（所有 hr 元素）自动与文本的颜色保持一致
hr {
height: .5em;
background: currentColor;
}
例子：
更改颜色：https://jsfiddle.net/noyanse/zb2cxLrf/5/
<style>
.icon{
display: inline-block;
width: 20px;
height: 20px;
//图标把图标部分删除，周围用白色背景填充，可以很省事。
background-image: url(sprite_icons.png);
background-position: 0 0;
background-color: currentColor;/*图标随着字体的颜色变化而变化*/
}
.link:hover{
color: red;
}
</style>
</head>
<body>
<a href="##" class="link"><i class="icon icon1"></i>返回</a>
</body>
继承inherit
inherit 可以用在任何 CSS 属性中，而且它总是绑定到父元素的计
算值（对伪元素来说，则会取生成该伪元素的宿主元素）
如：要把表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用 inherit 的特性即可https://jsfiddle.net/noyanse/5w99qq18/2/
inherit 关键字对于背景色同样非常有用https://jsfiddle.net/noyanse/5judagt8/4/
相信你的眼睛，而不是数字
人的眼睛并不是一台完美的输入设备。有时候精准的尺度看起来并不精准，而我们的设计需要顺应这种偏差。举一个在视觉设计领域广为人知的例子吧，我们的眼睛在看到一个完美垂直居中的物体时，会感觉它并不居中。实际上，我们应该把这个物体从几何学的中心点再稍微向上挪一点才能取得理想的视觉效果。
关于响应式网页设计
比较常见的实践是用多种分辨率来测试一个网站，然后添加越来越多的媒体查询（Media Query）规则来修补网站在这些分辨率下出现的问题。然而对于今后的 CSS 改动来说，每个媒体查询都会增加成本，而这种成本是不应轻易上升的。你添加的媒体查询越多，你的 CSS代码就会变得越来越经不起折腾。
这并不是说媒体查询是一种不良实践。只要用对了，它就是利器。但是，你只应该把它作为最后的手段。
媒体查询的断点不应该由具体的设备来决定，而应该根据设计自身来决定。这不仅是因为我们的网站需要面向的设备太多了（尤其是考虑到未来的设备时），还因为一个网站在桌面端可能会以任意尺寸的窗口来显示。如果你有信心自己的设计在任何可能出现的视口尺寸下都能良好工作，谁关心这些设备的分辨率具体是多少呢？
下面还有一些建议，可能会帮你避免不必要的媒体查询:
- 使用百分比长度来取代固定长度。如果实在做不到这一点，也应该
尝试使用与视口相关的单位（ vw 、 vh 、 vmin 和 vmax ），它们的值解析为视口宽度或高度的百分比。 - 当你需要在较大分辨率下得到固定宽度时，使用** max-width** 而不是width ，因为它可以适应较小的分辨率，而无需使用媒体查询。
- 不要忘记为替换元素（比如 img 、 object 、 video 、 iframe 等）设置一个 max-width ，值为 100% 。
- 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，background-size: cover 这个属性都可以做到。但是，我们也要时刻牢记——带宽并不是无限的，因此在移动网页中通过 CSS 把一张大图缩小显示往往是不太明智的。
- 当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定
列的数量。弹性盒布局（即 Flexbox）或者 display: inline-block加上常规的文本折行行为，都可以实现这一点。 - 在使用多列文本时，指定 column-width （列宽）而不是指定column-count （列数），这样它就可以在较小的屏幕上自动显示为单列布局。
尽最大努力实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸。
如果你发现自己需要一大堆媒体查询才能让设计适应大大小小的屏幕，那么不妨后退一步，重新审视你的代码结构。因为在所有的情况下，响应式都不是唯一需要考虑的问题。
合理使用简写
不要害怕使用简写属性。合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。
（/）分割是为了消除歧义，
top right 显然是 background-position ，而 2em 2em 是background-size ，
不管它们的顺序如何。但是，请设想一下 50% 50% 这样的值，它到底是 background-size 还是background-position 呢？
当你在使用展开式属性时，CSS 解析器明白你的意图；
而当你使用简写属性时，解析器需要在没有属性名提示的情况下
弄清楚 50% 50% 到底指什么。这就是需要引入斜杠的原因。
background: url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(bl.png) no-repeat bottom left / 2em 2em;
-------------------------------------------------------------------------------------------
background: url(tr.png) top right,
url(br.png) bottom right,
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;
我应该使用预处理器吗
如果使用得当，它们在大型项目中可以让代码更加灵活
但也有缺点。
很多受预处理器启发的特性都已经以各种方式融入到原生 CSS 中了。
这些原生特性通常比预处理器提供的版本要强大得多，因为它们是动态的。
- CSS 值与单位（第三版）中的 calc() 函数，不仅在处理运算时非常
强大，而且已经得到了广泛的支持，当下可用。 - CSS 颜色（第四版）（http://dev.w3.org/csswg/css-color）引入的 color()函数会提供颜色运算方法。
举个例子，预处理器完全不知道如何完成100% - 50px 这样的计算，因为在页面真正被渲染之前，百分比值是无法解析的。但是，原生CSS 的 calc() 在计算这样的表达式时没有任何压力。
变量玩法：
ul { --accent-color: #ccc; }
ol { --accent-color: rebeccapurple; }
li { background: var(--accent-color); }
建议是，在每个项目开始时使用纯 CSS，只有当代码开始变得无法保持 DRY 时，才切换到预处理器的方案。为了避免可能发生的“依赖”或“滥用”，在引入预处理器的问题上需要冷静决策，不应该在每个项目一开始时就不动脑筋顺着惯性来。
