css

浏览数：29 / 时间：2015年06月09日

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:value\9;
非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;} /*兼容已有模板*/