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 */
和Class命名
命名不要用缩写，单词间用"-"做为连接符
a、ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。如：#db-list。注：不要滥用ID。
b、Class是用来标识某一类型的元素，命名要简洁表意清楚。如：.list。
命名示例：
#nav-main
.infobox
.item
推荐使用的class名：
表示状态 | .on 在其上 | .active 活动 | .selected 选中 | .hover | ||||
表示位置 | .first | .last | .main | .side | ||||
表示结构 | .section | | | | ||||
通用元素 | .info 信息 | .tb 表格 | .frm 表单 | .nav 导航 | .list 列表 | .item 项 | .tag 标签 | .pic 图片 |
| | |||||||
| | |||||||
| | | | | | | | |
6.尽量避免使用CSS Hack
区别属性：
IE6 | _property:value |
IE6/7 | *property:value |
IE6/7/8/9 | property:value\9 |
非IE6 | property//:value |
区别规则：
IE6 | * html selector { ... } |
IE7 | *:first-child+html selector { ... } |
非IE6 | html>body selector { ... } |
firefox only | @-moz-document url-prefix() { ... } |
safari3+/chrome1+ | @media all and (-webkit-min-device-pixel-ratio:0) { ... } |
opera only | @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { ... } |
iPhone/mobile webkit | @media screen and (max-device-width: 480px) { ... } |
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:///”
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.尽可能的通过继承和层叠重用已有样式
附：常用命名表
名称 | 命名 | 名称 | 命名 | 名称 | 命名 |
页头 | header | 登录条 | loginbar | 标志 | logo |
侧栏 | sidebar | 广告条 | banner | 导航 | nav |
子导航 | subNav | 菜单 | menu | 子菜单 | submenu |
下拉菜单 | dropMenu | 工具条 | toolbar | 表单 | form |
栏目 | column | 箭头 | arrow | 搜索 | search |
搜索按钮 | btnSearch | 滚动条 | scroll | 内容 | content |
标签页 | tab | 文章列表 | list | 提示信息 | msg |
小技巧 | tips | 栏目标题 | title | 链接 | links |
页脚 | footer | 服务 | service | 热点 | Hot |
新闻 | news | 下载 | download | 注册 | register |
状态 | status | 按钮 | btn | 投票 | Vote |
合作伙伴 | partner | 版权 | copyright | 网站地图 | sitemap |
