一、css命名规则：
1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或——
2、命名避免使用中文拼音，应该采用更加简洁有语义的英文单词进行组合
3、命名注意缩写，但是不能盲目缩写，具体请参加常见的命名规则
4、不允许通过1、2、3等序号进行命名
5、避免class和id重名
6、id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
7、class用于标识某一个类型的对象，命名必须言简意赅
8、尽可能提高代码模块的复用，样式尽量用组合的方式
9、规则名称中不该包含颜色（red/blue），定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。
二、csss书写规范
1、排版规范
（1）使用4个空格，而不使用tab或者混用空格+tab作为缩进；
（2）规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一；
单行形式书写风格的排版约束
（1）如果是在html中写内联的css,则必须写成单行；
（2）每一条规则的大括号{}前后都要加空格；
（3）属性名冒号之前不加空格，冒号之后加空格；
（4）每一个属性值后必须添加分号；并且分号后加空格；
（5）多个selector共用一个样式集，则多个selector必须写成多行形式；
多行形式书写风格的排版约束
（1）每一条规则的大括号{}前后都要加空格；
（2）多个selector共用一个样式集，则多个selector必须写成多行形式；
（3）每一条规则结束的大写}必须与规则选择器的第一个字符对齐；
三、属性编写顺序
（1）显示属性：display/list-style/position/float/clear...
（2）自身属性（盒模型）：width/height/margin/padding/border
（3）背景：background
（4）行高：line-height
（5）文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...
（6）其他：cursor/z-index/zoom/overflow
（7）css3属性：transform/transition/animation/box-shadow/border-radius
（8）如果使用css3的属性，如果有必要加入浏览器前缀，则按照 -webkit-/-moz-/-ms-/-o-/std的顺序进行添加，标准属性写在最后。
（9）链接的样式请严格按照如下顺序添加：a:link --> a:visited --> a:hover --> a:active
四、代码优化
（1）合并margin、padding、border的left/top/right/bottom的设置，尽量使用短命名。
（2）选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式的设置。
（3）注意选择器的性能，不要使用低性能的选择器，减少使用子代、后代选择器。
（4）禁止在css中使用*选择符
（5）除非必须，否则，一般有class或id的，不需要再写上元素对应的tag
（6）0后面不需要单位，比如0px可以省略成0,0.8px可以省略成.8px
（7）如果是16进制表示颜色，则颜色取值应该大写
（8）如果可以，颜色尽量用三位字符来表示，例如#AABBCC写成#ABC
（9）如果没有边框时，不要写成border:0,应该写成border:none
（10）尽量避免使用AlphaImageLoader
（11）在保持代码解耦的前提下，尽量合并重复的样式
（12）background、font等可以缩写的属性、尽量使用缩写形式。
五、css Hack 的使用
减少使用css hack.
（1）区别属性（样式属性前缀法）：
IE6 _property:value
IE6/7 *property:value
IE6/7/8/9 property:value\9
（2）区别规则（选择符前缀法）：
IE6 *html .test{...}
IE7 *+html .test{...}
*:first-child+html .test{...}
（3）IE条件注释法
只在IE下生效 <!--[if IE]>...<![endif]-->
只在IE6下生效 <!--[if IE6]>...<![endif]-->
只在IE6以上生效 <!--[if gt IE6]>...<![endif]-->
（6）iPhone/mobile区别
max-width 最大宽度 ；device-width 设备宽度；orientation 屏幕定向(属性值：landscape 横屏；portrait 竖屏)
（1）@media screen and (max-device-width:480px){...}
（2）<link rel="stylesheet" type="text/css" media="screen and (max-device-width:480px)" href="..."/>
六、低权重原则
css的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。
权重的规则是这样的：HTML标签的权重是1，class的权重是10，id 的权重是100；
例如：div .test{...}的权重是1+10=11
p span{...}的权重是1+1=2
七、css sprite
（1）它能合并的只能是用于背景的图片，对于<img src="..."/>设置的图片，是不能合并到css sprite 大图中
（2）对于横向和纵向都要平铺的图片，也不能使用css sprite;如果是横向平铺的，只能将所有横向平铺的图片合成一张图片。
（3） 图片要排列得紧凑些，同时保证不会影响扩展性。