本文总结了一些CSS优化的规则，包括一些简写技巧，选择器的使用，及其它注意事项。
css简写技巧
1、属性值为0，而非0px。如果属性值为0，那么可以不为其添加单位（如px、em等），例如：
padding: 10px 5px 0px 0px;
可以写成：
padding: 10px 5px 0 0;
2、背景属性合写。背景属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，可以将这些合并写到一句里，例如：
background-image: url(bg.png); background-position: 0 0; background-repeat: no-repeat;
可以写成：
background: url(bg.png) no-repeat 0 0;
4、文字属性合写。和背景一样，文字属性也有很多可能会用到的属性值，来个复杂的文字样式：
font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5; font-family:Arial, sans-serif;
可以写成：
font:italic small-caps bold 12px/1.5 Arial, sans-serif;
4、颜色简写。css里的颜色数值使用“#”加6个16进制数表示的。这6个数两个一组，分别表示red，green，blue的值，有人说如果每对的颜色值都是各自相等的，可以简写成一个数值。例如，#ff6600，可以简写成#f60。关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写字母及数字组成的六位数标注。在未知情况下不希望冒险而降低了渲染的效率，所以还是建议写成#FF6600。
5、margin、padding等的简写。有些人会这样声明边框：
margin-top:5px; margin-right:10px; margin-bottom:5px; margin-left:10px;
可以这样简写：
margin:5px 10px 5px 10px;
css里，像margin、padding、border-width等在写属性值时都是按照上-右-下-左的顺时针方向来写的，不要弄混顺序。像上面的例子，上下边距，左右边距分别是相等的，还可以进一步简化：
margin:5px 10px;
同理，padding、border-width等也是如此。
6、border的简写。举个例子，声明一个1像素的黑色实线边框：
border-width:1px; border-style:solid; border-color:#000;
可以简写成：
border:1px solid #000;
有人可能会记不清顺序，我通常这样记，“数字靠两端，字母摆中间”。
7、列表样式。用的不多，一个例子：
list-style-type:square; list-style-position:inside; list-style-image:url(filename.gif);
这样简写：
list-style:square inside url(filename.gir);
选择器使用
据说Mozilla样式系统的选择器是从右向左匹配的，这里有篇文章https://developer.mozilla.org/en/Writing_Efficient_CSS，看看就行，毕竟因为ie6的存在，像>，+这样的选择器我们是用不到的，关于浏览器对选择器的支持情况，可以看下http://www.masterboke.cn/2009/02/26/css-browser-support/。不管选择器是从左还是从右匹配，有三点注意一下：
1、避免使用通用选择符。想*{}，#test *{}这样的选择器还是不要用。
2、不要用标签修饰id选择器。不要出现div #test{}这样的选择器，id选择器直接单独使用就行，不用再画蛇添足。
3、不要使用标签修饰class选择器。不要出现div .test{}这样的选择器。
其它注意事项
1、对css代码进行压缩。不管开发时是啥样的，呈现到用户面前时必定是压缩过的。
2、应该将CSS 放置于结构的上方（一般放置于head 元素内）。CSS 是解释型语言，ff和ie在等待CSS 传输完成之前不会渲染任何东西。放在顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。
3、尽量使用 <link rel=”stylesheet” href=”http://www.masterboke.cn/test.css” type=”text/css”> 的样式导入方式，而减少@import 的使用，更不要使用多层嵌套的@import 。因为在 IE 里，@import 相当于将<link> 放在页面尾部。
4、不要使用css表达式。CSS Expressions这个东西好像也只有ie里能用。
5、将css从页面里剥离，放在单独的文件里，这样能够使用缓存、压缩等策略，当然要注意不要引入过多的css文件，会增加http请求的。
6、避免使用滤镜。IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。