1.根据新建样式的适用范围分为三级：全站级、产品级、页面级

全站级： 需要放在所有CSS引用的最前面，它包括：标签reset、常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式等。

           注：不要轻易改动全站级CSS。改动后，要经过全面测试

页面级： 指仅在一个或少量几个页面中用到。

           如果仅在一个页面中用到的采用内联方式嵌入于页面head里；

           多于两个页面的放到外联的CSS文件中，该文件再放到相应的产品目录下。

产品级： 仅作用于单一产品，具体规范参照页面级即可。

附：常用复位CSS代码

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding:0;margin:0; }

table{ border-collapse:collapse;border-spacing:0; }

fieldset,img{ border:0; }

address,caption,cite,code,dfn,em,strong,th,var{ font-weight:normal;font-style:normal; }

ol,ul{ list-style:none; }

caption,th{ text-align:left; }

h1,h2,h3,h4,h5,h6{ font-weight:normal;font-size:100%; }

abbr,acronym{ border:0; }

2.调用样式

采用link方式不能使用@import

<link href="css/core.css" rel="stylesheet" type="text/css" />

3.单条CSS规则的书写格式要求

a. 属性和属性值全部采用小写，每项定义成一行, 属性的冒号后面要加空格, 每项定义后面要加分号。

.selector {

property:value;
      property:value;
}

b、多个selector每个占一行：

.selector1,

.selector2,

.selector3 {
property:value;
property:value;
}

c、兼容多个浏览器时，将标准属性写在后面，如：

-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;

4.将作用于不同模块的CSS规则集中放在一起时要用注释说明

注释的格式：

/* mod: doulist */

通用规则同样分类放在一起。通用规则在具体模块规则的前面。

例如：

/* button */

.btn_xxx1,

.btn_xxx2,

.btn_xxx3 { property:value;property:value; }

/* mod */

...

/* nav */

...

/* mod: events album */

5.ID和Class命名

命名不要用缩写，单词间用"-"做为连接符

a、ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。如：#db-list。注：不要滥用ID。

b、Class是用来标识某一类型的元素，命名要简洁表意清楚。如：.list。

命名示例：

#nav-main

.infobox

.item

推荐使用的class名：

6.尽量避免使用CSS Hack

区别属性：

区别规则：

7.尽量使用overflow方式清浮动，特殊情况下可以使用after清浮动

8.内联和外联的CSS都必须放在页面的head里。

顺序是：全站级CSS，产品级CSS，页面级(外联)CSS，页面级(内联)CSS，内联CSS

9.避免使用低效的选择器

如：

body > * {...}

ul > li > a {...}

#footer > h3 {...}

ul#top_blue_nav {...}

#searbar span.submit a { ... }

10.尽量避免使用filter

11.不要直接修改标签的样式

如：

 div { ... }

12.不要在标签上直接写样式

如：

<div style="margin-bottom:30px;">http://www.google.com/”

13.所有的装饰性的背景图片要写入css中，背景图片使用css sprite

      考虑到多个开发人员协作开发，故Sprite按照模块制作；

14.尽量减少使用影响性能的属性

如：

<position: absolute; float: lieft; folat: right;

15.尽量简写代码

如：

body{font:italic bold 12px/20px

}

input{padding:2px 3px;

    border:1px solid #999

}

16.除特殊情况，杜绝使用以下方式兼容 ie8

如：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

17.不要在CSS中使用 expression

18.不要在CSS中使用 @import

      与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

       1.使用多个 <link> 元素

         2.通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

         3.通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

19.非迫不得已情况下不要在CSS中使用 !important

20.绝对不要在CSS中使用 "*" 选择符

21.书写代码前，考虑并提高样式重复使用率

22.测试完成后压缩合并css文件，力求降低http请求

23.书写规范

■ 将常用的布局方法和常用颜色等写成全局类选择符

■ 尽量使用类选择符(.class)、适当的使用ID选择符（#element）、包含选择符(#element span) 、选择符分组(#element,.class,span)

■ CSS hack的原理：由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。可以根据这个来针对不同的浏览器来写不同的CSS。浏览器优先级别：FF < IE7 < IE6。书写顺序一般是将识别能力强的浏览器的CSS写在后面

■ 每个属性占一行，而不要将全部属性写在一行。

■ 选择器较多的时候可以按照 a-z 的顺序排列，方便修改的时候更快找到所需的属性和避免多写。

24.尽可能的通过继承和层叠重用已有样式

附：常用命名表