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 { ... }