CSS SECRETS 总结(1)

作者：LEA VEROW

---

1. 尽量减少代码重复：当某些值相互依赖时，应该把它们的相互关系用代码表达出来

font-size:20px;
line-height:1.5;  //而不是 line-height:30px;

除此之外，我们应该多用em，rem或者百分比单位与字体大小或父元素进行关联。

2. 继承：inherit可以应用在任何CSS属性上，而且它总是绑定到父元素的计算值（对于伪元素，则会取生成该伪元素的宿主元素）。

.callout{
  position:relative;
  ...
}
.callout::before{
  content:"";
  border:inherit;
  background:inherit;
  ...
}

3. 相信你的眼睛而不是数字：视觉错觉在任何形式的视觉设计中都普遍存在，在网页设计中也不例外。比如在一个文本容器中指定相同的内边距，我们会看到上下的内边距比左右的大，而实际上它们是相等的。

   
   

4. 关于媒体查询：媒体查询不能以一种连续的方式来修复问题，如果大部分代码并不是以弹性的方式来编写的，那么媒体查询只不过是修补了某个特定分辨率的问题而已——这相当于把灰尘扫到地毯下面。还有，媒体查询的断点不应该有具体的设备来决定，而是根据设计自身来决定。一些方法可以采用来避免不必要的媒体查询：

• 使用百分比长度取代固定长度，退而取之也应该尝试使用vw、vh、vmin和vmax等和视口相关的单位。
• 在较大分辨率下得到固定宽度，使用max-width比width更好，因为它可以适应较小的分辨率。
• 为替换元素（img、object、video、iframe等）设置一个max-width:100%。
• 如果背景图片需要铺满容器，使用background-size：cover就可以了。
• 进行行列式布局时，应该让视口的宽度来决定列的数量，flex可以实现这一点。
• 使用多列文本时，指定column-width而不是column-count，这样它就可以在较小的屏幕上自动显示为单列布局。

总的来说，我们要尽最大努力实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸。

所以，如果你发现需要一大堆媒体查询才能实现你想要的效果，不妨回头审视一下你的代码，因为在所有的情况下，响应式都不是唯一需要考虑的问题。

6. 使用简写：合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。当然，如果我们要明确覆盖某些值的时候，展开式编写是必须的。其实，展开式编写和简写的配合可以发挥出很大的作用。

background:url(xx1.png) no-repeat top right / 2em 2em,
                    url(xx2.png) no-repeat bottom right / 2em 2em,
                    url(xx3.png) no-repeat bottom left / 2em 2em;

我们可以改写为：

background:url(xx1.png)  top right ,
           url(xx2.png)  bottom right,  
           url(xx3.png)  bottom left;
background-size:2em 2em;
background-repeat:no-repeat;