CSS编码技巧

尽量减少代码重复

button{
    padding: 6px 16px;
    border: 1px solid #446d88;
    background: #58a linear-gradient(#77a0bb, #58a);
    border-radius: 4px;
    box-shadow: 0 1px 5px gray;
    color:white;
    text-shadow: 0 -1px 1px #335166;
    font-size: 20px;
    line-height: 30px;
}

一个按钮

这段代码在可维护性方面存在一些问题：

1. 字号与行号写成了绝对值，若决定改变字号同时就要调整行高；且行高没有反映出与字号的关系>>>因此，当某些值互相依赖时，应该把它们的相互关系用代码表达出来
   以上，行高是字号的1.5倍，可改成以下：

font-size: 20px;
line-height: 1.5;

跨出了这步，字号也不必设置为绝对值，可改用百分比或em单位

2. 其他效果没有依赖字号缩放，应改为em单位（希望保持原样的效果为绝对值）。同时，此处投影效果以及渐变效果都只适用于单一的条件下，要想使它适用于多种情况，可用HSLA,RGBA等颜色控制。

现在只要覆盖background-color属性就可以得到不同颜色版本的按钮了：

不同颜色版本的按钮

button{
    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 rgba(0,0,0,.5);
    color:white;
    text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
    font-size: 125%; /*假设父级的字号是16px=1em*/
    line-height: 1.5;
}
button.ok{
    background-color: #6b0;
}
button.cancel{
    background-color: #c00;
}

有时候，代码易维护和代码量少不可兼得；
currentColor本身是很多CSS颜色属性的初始值；
inherit绑定父元素的计算值（对伪类元素来说，则会取生成该伪元素的宿主元素）

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

视觉上的错觉在任何形式做的视觉设计中都普变存在，需要我们有针对性地进行调整

关于响应式网页设计

避免不必要的媒体查询：

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

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

合理使用简写

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

预处理器的使用

使用得当，可以在大型项目中让代码更灵活，但可能导致CSS文件体积和复杂度的失控、调试难度增加、存在编译延时。