(转)豆瓣网前端开发规范之 【CSS】
Douban CSS Code Guideline
来源：https://github.com/kejun/CSS-Code-Guideline#douban-css-code-guideline-
1. CSS浏览器支持标准
| WinXP | Win7 | OS X | |
| IE9 | B | B | |
| IE8 | A | A | |
| IE7 | B | B | |
| IE6 | B | B | |
| Chrome16 | A | A | A |
| Chrome14 | A | A | A |
| Firefox10 | A | A | A |
| Firefox9 | A | A | A |
| Safari | B | B | B |
| Opera | C | C | C |
（注：根据2012年4月数据整理）
- A级－交互和视觉完全符全设计的要求
- B级－视觉上允许有所差异，但不破坏页面的整体效果
- C级－可忽略设计上的细节，但不防碍使用
2. 重用已有的样式库
- 2-1. 主站全局CSS文件 - douban.css (注意：新项目中不推荐使用)
- 2-2. 兼容主站的全局CSS文件 - /css/core/init.css
- 2-3. 当前使用的CSS库（持续更新）
- util-01 reset /css/core/reset.css
- util-02 通用模块容器 /css/core/mod.css
- ui-01. 喜欢按钮 /css/core/fav_btn.css
- ui-02. 视频/相册列表项 /css/core/media_item.css
- ui-03. 评星 /css/core/rating.css
- ui-04. 通用按钮 /css/core/common_button.css
- ui-05. 分页 /css/core/pagination.css
- ui-06. 推荐按钮 /css/core/rec_btn.css
- ui-07. 老版对话框 /css/core/old_dialog.css
- ui-08. 老版Tab /css/core/old_tab.css
- ui-09. 老版成员列表 /css/core/old_userlist.css
- ui-10. 老版信息区 /css/core/notify.css
- ui-11. 社区用户导航 /css/core/profile_nav.css
- ui-12. 当前大社区导航 /css/core/site_nav.css
- ui-13. 加载中 /css/lib/loading.css
3. CSS文件的目录管理
所有的CSS分为两大类：通用类和业务类。
-
3-1. 通用的CSS文件，放在如下目录中：
基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui -
3-2. 业务类的CSS是指和具体产品（如音乐、读书等）相关的文件，放在如下目录中：
读书 /css/book/ 电影 /css/movie/ 音乐 /css/music/ 社区 /css/sns/ 小站 /css/site/ 同城 /css/location/ 电台 /css/radio/ 九点 /css/newnine/ 商务 /css/biz/ ... /css/产品名称 -
3-3. 外联CSS文件适用于全站级和产品级通用的大文件。
-
3-4. 内联CSS文件适用于在一个或几个页面共用的CSS。利用模板系统支持的istatic方法引用。
-
3-5. 模块依赖的CSS和模块放在一起。利用模板系统支持的collect_css过滤器实现。
4. CSS的模块化组织
当前静态文件管理系统已支持SCSS和导入语法。开发中，应尽量按功能分解大文件，实现模块化的文件组织。
- 使用和完善现有CSS库（见2-4）。
- 单个CSS文件避免过大（建议少于300行）。
- CSS文件嵌套不要超过一层
5. 不要轻易改动全站级CSS和通用CSS库。改动后，要经过全面测试
6. 单条CSS规则的书写格式要求
- 6-1. 单行形式适用于直接写在页面中和长文件的情况。声明写在一行。需要在“{"和"}”前后加空格。 （注：在很长的文件中，单行形式有利于检索选择器）
.selector { property:value;property:value; }
简短规则声明（1或2个）也适用单行形式。
.selector { property:value; }
- 6-2. 格式化书写形式。适用于不是很长的模块文件或CSS3语法。冒号后加空格。
.selector {
property: value;
property: value;
}
CSS3兼容书写形式和对齐方式：
.selector {
-webkit-box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
-moz-box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
}
CSS3中逗号分隔的长属性值：
.selector {
box-shadow:
1px 1px 1px #000,
2px 2px 1px 1px #ccc inset;
background-image:
linear-gradient(#fff, #ccc),
linear-gradient(#f3c, #4ec);
}
- 6-3. 多个(>2)selector每个占一行：
.selector1,
.selector2,
.selector3 { ... }
-
6-4. 规则声明的顺序：定位、盒模型（width/height/padding/border/margin）、行高、字体/字号/颜色、背景、CSS3效果等
-
6-5. 兼容多个浏览器时，将标准规则声明写在后面，如：
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
7. 注释书写形式
- 7-1. 注释内容单行控制在40个中文或80个英文字符宽。注释的格式：
/*
* mod: doulist
* 描述内容
*/
SCSS中支持单行注释
// mod: doulist
- 7-2. 规则分类放在一起。通用规则在具体业务规则的前面。如：
/* layout */
...
/* mod */
...
/* nav */
...
/* mod: events album */
...
8. ID和Class命名。命名不要用缩写(除一些公认的缩写，见8-4)，单词间用"-"做为连接符
- 8-1. ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。不要滥用ID。如： #db-video-list、#group-member-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, .nav, .list, .item, .tag, .pic, .info
9. 避免滥用CSS Hack
推荐使用下面的：
区别属性：
| IE6 | _property:value |
| IE6/7 | *property:value |
| IE6/7/8/9 | property:value\9 |
区别规则：
| IE6 | * html selector { ... } |
| IE7 | *:first-child+html selector { ... } |
| 非IE6 | html>body selector { ... } |
| firefox only | @-moz-document url-prefix() { ... } |
| saf3+/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) { ... } |
注意：SCSS会自动转换一些不标准CSS写法，会破坏CSS Hack。
10. 使用after或overflow的方式清浮动，不要在html里增加多余的标签
11. CSS必须放在head里
12. 避免使用低效的选择器
如：
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
.target #target-node { ... }
