css编码技巧

尽量减少代码重复

在实践中，代码可维护性的最大要素是尽量减少改动时要编辑的地方。

举例说明

padding:6px 12px;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;

以上的代码有什么问题呢？

如果需要改变字号，那么同时需要调整行高。
【当某些值相互依赖时，应该把它们的相互关系用代码表达出来】

如果将父级的字号加大，则不得不修改每一处使用绝对值作为字体尺寸的样式。

需要确定哪些效果是应该跟着变大变小，哪些效果是保持不变的

产生主色调的亮色和暗色变体，其实可以使用将半透明的黑色或白色叠加在主色调上。
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
//作者建议使用HSLA而不是RGBA来产生半透明的白色。因为它的字符长度更短，重复率更低。

那么经过修改后的代码如下：

padding: .3em .8em;border: 1px solid rgba(0,0,0,.1);background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);border-radius: .2embox-shadow: 0 .05em .25em rgba(0,0,0,.5);color: white;text-shadow: 0 -.05em .05em rgba(0,0,0,.5);font-size: 125%;line-height:1.5

关于使用rem还是em还是百分比，需要根据具体情况来决定。

【插播笔试题】

Q：line-height:1.5 与line-height:150%的差别？

line-height:1.5 是根据自身元素的font-size进行计算。

line-height:150% 是根据父元素继承而来的font-size进行计算。

Q：rem,em,px的差别

rem css3新增单位。rem为元素设定字体大小时，相对的只是HTML根元素。【IE8以下不支持】

px 像素px是相对于显示器屏幕分辨率而言的

继续回到css编码技巧。

有时候，代码易维护和代码量少不可兼得。

例如，为元素添加一个10px宽的边框，但左侧不加边框
border-width: 10px 10px 10px 0;
但若以后需要改动边框的宽度，需要同时改3个地方。那么以下这种方式可能更好。
border-width: 10px;
border-left: 0;

currentColor【IE9+支持】

例如，我们想让所有的水平分割线元素自动与文本颜色保持一致，只需要这样写。
hr { background: currentColor;}
border和box-shadow默认的颜色就是当前的文字颜色，也就是类似currentColor。currentColor本身就是很多颜色属性的初始值，例如border-color、outline-color、text-shadow和box-shadow的颜色。【iOS Safari浏览器下(iOS8)下，currentColor有一些bug，例如伪元素hover时候，background:currentColor的背景色不会跟着变化。关于currentColor其他信息可查看张鑫旭博客，。

继承 inherit

例如，在创建提示框时，可能希望小箭头能自动继承背景和边框的样式。就可以这样做。
.callout:before {
```
//其他代码   background: inherit;   border: inherit;
```
}

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

视觉上的错觉在任何形式的视觉设计中都普遍存在。如果希望四边的内边距看起来基本一致，需要减少顶部和底部的内边距。

关于响应式网页设计

作者提出了一些建议，可能可以避免不必要的媒体查询

使用百分比长度来取代固定长度，如果做不到，尝试使用与视口相关的单位(vw,vh,vmin,vmax)，它们的值解析为视口宽度与高度的百分比。

当需要在较大分辨率得到固定宽度时，使用max-width

不要忘记为替换元素（例如img,object,video,iframe等）设置一个max-width，值为100%

假设背景图片需要完整的铺满一个容器，可以使用background-size:cover。【在移动网页中通过css把一张大图缩小显示往往不太明智】

当图片或其他元素以行列式进行布局，让视口的宽度来决定列的数量。可以使用弹性盒布局(Flexbox)或者display:inline-box加上文本折行行为。

在使用多列文本时，指定column-width而不是column-count，这样可以在较小的屏幕上自动显示为单列布局。
【尽量实现弹性可伸缩的布局，并在媒体查询的各个断点区间内制定相应尺寸】

合理使用缩写

如果要明确地去覆盖某个具体展开式属性并保留其他相关样式，则需要用展开式属性。

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;//此时，只需要在一处修改，就可以改变所有的background-size和background-repeat

转载地址：http://pqvwa.baihongyu.com/

你可能感兴趣的文章

linux下两个tomcat通过不同端口访问不同项目

查看>>