(36) css企业代码书写规范

css书写规范

1：元素尽量使用class选择器匹配，对于特殊功能可以考虑使用 ID选择器。

2：明确各选择器的优先级，作用范围。

3：CSS写完之后必须使用“;”号结尾，虽然浏览器支持不用分 号结尾，但是不建议这么做。

4：除非编写HTML5页面，否则不允许使用CSS3伪类，如：

:nth-child(1)等伪类，禁止使用。

5：编写CSS样式时，不允许换行，样式必须一行写完，自动换行 除外。

6：对于子元素样式采用链选择器进行选择，如：

:btn-save div

7：元素选择器只能在定义全局CSS和子元素匹配时使用（尽量少 用），其他地方禁止使用。

8：请记住IE浏览器的hack方式，如下：

IE6 = _width:100px;

IE7 = *width:100px;

IE8 = width:100px\9;

IE8/9 = width:100px\0;

IE9 = width:100px\9\0;

9：: 编码统一为utf-8;

10： css属性书写顺序, 建议遵循:  布局定位属性-->自身属性-->文本属性-->其他属性: 此条可根据自身习惯书写, 但尽量保证同类属 性写在一起:

11： 书写代码前, 考虑并提高样式重复使用率;

12： 充分利用html自身属性及样式继承原理减少代码量, 比如:

 Example Source Code [www:52css:com]

<ul class="list"><li>这儿是标题列表<span>2010-09- 15</span></ul>

定义

ul:list li{position:relative}  ul:list li span{position:absolute; right:0}

即可实现日期居右显示

13： 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;

14： 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现 , 如

 Example Source Code [www:52css:com]

thead,tr,th,td,tbody,tfoot,colgroup,scope;

 (cellspaing及cellpadding的css控制方法:

table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} ,

base:css文件中我会初始化表格样式)

15： 杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8;

 Example Source Code [www:52css:com]

_background:none;_filter:progid:DXImageTransform:Microsoft:AlphaImageLoader

(sizingMethod=crop, src=’img/bg:png’);

16： 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;

17：减少使用影响性能的属性, 比如position:absolute || float ;

18：必须为大区块样式添加注释, 小区块适量注释;