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 10px5px; 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则会。
10. 使用<link>代替@import
首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计：不要使用@import》。所以，请避免使用@import
11. 使用外部样式表
这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：
<style type="text/css" >
#container{ .. }
#sidebar{ .. }
</style>
或
<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >
而是使用<link>导入外部样式表：
<link rel="stylesheet" type="text/css" href="css/styles.css" />
12. 避免使用CSS表达式（Expression）
CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" :"#F08A00" );
如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。
