4、选择器命名规范
- #id选择符使用驼峰命名，只允许：大小写字母、数字。如：#userOperation
- .class命名使用“-”连接，只允许：小写字母、数字、-。如：.mod-test .name{}
命名上尽量使用语义化的单词，不要使用如： false, div, new, true等
5、background-image使用格式
如果使用css sprites或者多个样式引用了同一张图片，如：
/*.img1,.img2使用了同一张图片*/
.img1{background:url(http://hi.bdimg.com/test.png) no-repeat 0 -10px;}
.img2{background:url(http://hi.bdimg.com/test.png) no-repeat 0 -20px;}
/**这时用下面的方式**/
.img1, .img2{background:url(http://hi.bdimg.com/test.png) no-repeat;}
.img1{background-position:0 -10px}
.img2{background-position:0 -20px}
并且.img1,.img2的CSS尽量放在文件顶部，方便查找
6、CSS Hack方式
尽量减少hack方式，如果必须使用的话，只允许下面的hack方式。
| IE6 | _property:value; |
| IE6/7 | *property:value; |
| IE6/7/8/9 | property:value9; |
| 非IE6 | property//:value; |
7、使用.clearfix清浮动
/** * 清除浮动，不需要增加额外的标签，直接放在外层的class里即可 * 非IE下使用CSS2的after伪类属性 * IE下使用zoom:1触发haslayout * 20是ascii的空白符，使用空白字符不用增加visibility:hidden * zoom前不加*。如果页面中没有加IE7渲染的meta标签，IE8下不识别*zoom * * <div class="clearfix"> * <div class="grid-40"></div> * <div class="grid-50"></div> * </div> **/ .clearfix:after{content:'20';display:block;height:0;clear:both;} .clearfix{zoom:1;} .clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden;} /*兼容已有模板*/
11、背景图片选择格式
- gif适合一个简单的icon，并且这些icon有全透明。如果用gif图片质量可以接受的话尽量使用gif,避免使用png8导致在ie6下要hack
- 动画目前只能使用gif
- 禁止使用jpg，除非有特殊情况，如：大图片作为背景图
- 其他情况下都使用png
- 没有alpha透明(可变透明)的情况下，使用png8。
- 用到了alpha透明的时候，使用png32（ps里对应的是png24）,因为ie6下使用png8的alpha透明无法hack
- 切图工具推荐使用fireworks
- 用ps的话必须是存为web格式