CSS开发规范.doc

haiCSS开发规范
1. CSS浏览器支持标准
(注:根据2010年11月10日数据整理)
A级-交互和视觉完全符全设计的要求
B级-视觉上允许有所差异,不破坏页面整体效果
C级-可忽视视觉上的问题,但不防碍使用
2. 尽可能的通过继承和层叠重用已有样式
3. 根据新建样式的适用范围分为三级:全站级、产品级、页面级
3-1. (向全站级CSS文件中添加规则参见4和5)。
3-2. 产品级CSS是指作用于某一垂直产品(如音乐、读书、电台等),文件放在css/下相应目录下。
 
页面级指仅在一个或少量几个页面中用到。如果仅在一个页面中用到的采用内联方式嵌入于页面head里,多于两个页面的放到外联的CSS文件中,该文件再放到相应的产品目录下。
4. 。它需要放在所有CSS引用的最前面。它包括:标签reset、常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式等
5. 不要轻易改动全站级CSS。改动后,要经过全面测试
6. 单条CSS规则的书写格式要求
6-1. 属性需要写在一行。需要在“{"和"}”前后加空格。
     .selector { property:value;property:value; }
6-2. 多个(>2)selector每个占一行:
     .selector1,
     .selector2,
     .selector3 { property:value;property:value; }
6-3. 兼容多个浏览器时,将标准属性写在后面,如:
     -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
7. 将作用于不同模块的CSS规则集中放在一起,同时用注释说明
注释的格式:
     /* mod: doulist */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如:
     /* button */
     ...
     /* mod */
     ...
     /* nav */
     ...
     /* mod: events album */
8. ID和Class命名。命名不要用缩写,单词间用"-"做为连接符
8-1. ID是用来标识具体模块,命名必须具体且唯一,由前缀和名字组成。不要滥用ID。如: #db-video-list。
8-2. Class是用来标识某一类型的元素,命名简洁表意清楚。如:.list。
8-3. 命名示例:
     坏:
     #rec
     .gray-link
     .broadsmr
     .pl
     好:
     #db-nav-main
     .infobox
     .item
8-4. 推荐使用的class名:
表示状态
.on, .active, .selected, .hili
表示位置
.first, .last, .main, .side
表示结构
.hd, .bd, .ft, .col, .section
通用元素
.tb, .frm