CSS SECRETS 总结(1)
2018-03-27 本文已影响0人
Naeco
作者：LEA VEROW
- 尽量减少代码重复：当某些值相互依赖时，应该把它们的相互关系用代码表达出来
font-size:20px;
line-height:1.5; //而不是 line-height:30px;
除此之外，我们应该多用em，rem或者百分比单位与字体大小或父元素进行关联。
- 继承：inherit可以应用在任何CSS属性上，而且它总是绑定到父元素的计算值（对于伪元素，则会取生成该伪元素的宿主元素）。
.callout{
position:relative;
...
}
.callout::before{
content:"";
border:inherit;
background:inherit;
...
}
-
相信你的眼睛而不是数字：视觉错觉在任何形式的视觉设计中都普遍存在，在网页设计中也不例外。比如在一个文本容器中指定相同的内边距，我们会看到上下的内边距比左右的大，而实际上它们是相等的。
-
关于媒体查询：媒体查询不能以一种连续的方式来修复问题，如果大部分代码并不是以弹性的方式来编写的，那么媒体查询只不过是修补了某个特定分辨率的问题而已——这相当于把灰尘扫到地毯下面。还有，媒体查询的断点不应该有具体的设备来决定，而是根据设计自身来决定。一些方法可以采用来避免不必要的媒体查询：
- 使用百分比长度取代固定长度，退而取之也应该尝试使用vw、vh、vmin和vmax等和视口相关的单位。
- 在较大分辨率下得到固定宽度，使用max-width比width更好，因为它可以适应较小的分辨率。
- 为替换元素（img、object、video、iframe等）设置一个max-width:100%。
- 如果背景图片需要铺满容器，使用background-size：cover就可以了。
- 进行行列式布局时，应该让视口的宽度来决定列的数量，flex可以实现这一点。
- 使用多列文本时，指定column-width而不是column-count，这样它就可以在较小的屏幕上自动显示为单列布局。
总的来说，我们要尽最大努力实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸。
所以，如果你发现需要一大堆媒体查询才能实现你想要的效果，不妨回头审视一下你的代码，因为在所有的情况下，响应式都不是唯一需要考虑的问题。
- 使用简写：合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。当然，如果我们要明确覆盖某些值的时候，展开式编写是必须的。其实，展开式编写和简写的配合可以发挥出很大的作用。
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;
