01--css编码技巧--css揭秘

一 尽量减少代码重复

1.按钮

#btn {
    padding: .3em .8em;
    border: 1px solid #446d88;
    background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
    border-radius: .2em;
    box-shadow: 0 .05em .25em gray;
    color: white;
    text-shadow: 0 -.05em .05em #335166;
    font-size: 125%;
    line-height: 1.5;
}

 

2.代码易维护vs. 代码量少

3.currentColor 自动从文本那获取颜色值

hr {
    height: .5em;
    background: currentColor;
}

 

3.继承 inherit
inherit 可以用在任何CSS 属性中，而且它总是绑定到父元素的计
算值（对伪元素来说，则会取生成该伪元素的宿主元素）
这个inherit 关键字对于背景色同样非常有用。举个例子，在创建提
示框的时候，你可能希望它的小箭头能够自动继承背景和边框的样式（

.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);
}

 

二 相信你的眼睛，而不是数字

人的眼睛并不是一台完美的输入设备。有时候精准的尺度看起来并不精
准，而我们的设计需要顺应这种偏差。举一个在视觉设计领域广为人知的例
子吧，我们的眼睛在看到一个完美垂直居中的物体时，会感觉它并不居中。
实际上，我们应该把这个物体从几何学的中心点再稍微向上挪一点，才能取
得理想的视觉效果

三 关于响应式网页设计

你添加的媒体查询越多，你的CSS代码就会变得越来越经不起折腾。
媒体查询的断点不应该由具体的设备来决定,而应该根据设计自身来决定

1.媒体查询的注意和建议：
1> 使用百分比长度来取代固定长度。如果实在做不到这一点，也应该
　　尝试使用与视口相关的单位（vw、vh、vmin 和vmax），它们的值解
　　析为视口宽度或高度的百分比。
2> 当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是
　　width，因为它可以适应较小的分辨率，而无需使用媒体查询。
3> 不要忘记为替换元素（比如 img、object、video、iframe 等）设
　　置一个max-width，值为100%。
5> 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，
　　background-size: cover 这个属性都可以做到。但是，我们也要时
　　刻牢记——带宽并不是无限的，因此在移动网页中通过CSS 把一张
　　大图缩小显示往往是不太明智的。
6> 当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定
　　列的数量。弹性盒布局（即Flexbox）或者display: inline-block
　　加上常规的文本折行行为，都可以实现这一点。
7> 在使用多列文本时，指定 column-width（列宽）而不是指定
　　column-count（列数），这样它就可以在较小的屏幕上自动显示为单
　　列布局。

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

四 合理使用简写

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

#box {
    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;
}

#box {
    background: url(tr.png) top right,
    url(br.png) bottom right,
    url(bl.png) bottom left;
    background-size: 2em 2em;
    background-repeat: no-repeat;
}

现在，我们只需要在一处修改，就可以改变所有的background-size
和background-repeat 了。你会发现这个技巧在本书中的使用非常普遍。

五 我应该使用预处理器吗
如果使用得当，它们在大型项目中可以让代码更加灵活
1> CSS 的文件体积和复杂度可能会失控
2> 调试难度会增加

小花絮 ：
怪异的简写语法