8. 保持CSS的可读性
书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况,哪种可读性更高,我想不言而明。
/*** 每个样式属性写一行 ***/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }
当对于一些样式属性较少的选择器,我会写到一行:
/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399cc; color:#666;}
对于这个规则并非硬性规定,但无论您采用哪种写法,我的建议是始终保持代码一致。属性多的分行写,属性少于3个可以写一行。
9. 选择更优的样式属性值
CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,如
区别在于border:0把border设为0px,虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
而border:none把border设为"none"即没有,浏览器解析"none"时将不作出渲染动作,即不会消耗内存值。所以建议使用border:none;
同样的,display:none隐藏对象浏览器不作渲染,不占用内存。而visibility:hidden则会。