豆瓣css开发规范
今天无意间看到了豆瓣的一些前端开发规范， 攻城师作战指南
里面的 Javascript代码风格规范 差不多就是基本的javascript规范，主要还是分享一下 css部分的规范
因为规范是在google docs上，需要穿过篱笆，所以我就直接帖过来了，一起学习一下哈
以下就是转的部分
——————————————–华丽的分割线————————————————
Douban CSS Code Guideline
1. CSS浏览器支持标准
| WinXP | Win7 | OS X | |
| IE9 | C | C | |
| IE8 | A | A | |
| IE7 | A | A | |
| IE6 | A | A | |
| Chrome7 | C | C | C |
| Chrome6 | A | A | A |
| Chrome3 | B | B | B |
| Firefox4 | C | C | C |
| Firefox3.6 | A | A | A |
| Firefox3.5 | C | C | |
| Firefox3 | C | C | |
| Safari | B | B | B |
| Opera | C | C | C |
（注：根据2010年11月10日数据整理）
- A级－交互和视觉完全符全设计的要求
- B级－视觉上允许有所差异，不破坏页面整体效果
- C级－可忽视视觉上的问题，但不防碍使用
2. 尽可能的通过继承和层叠重用已有样式
3. 根据新建样式的适用范围分为三级：全站级、产品级、页面级
- 3-1. 目前全站级的CSS文件仅有core.css和douban.css(向全站级CSS文件中添加规则参见4和5)。
- 3-2. 产品级CSS是指作用于某一垂直产品（如音乐、读书、电台等），文件放在css/下相应目录下。
页面级指仅在一个或少量几个页面中用到。如果仅在一个页面中用到的采用内联方式嵌入于页面head里，多于两个页面的放到外联的CSS文件中，该文件再放到相应的产品目录下。
4. core.css是全站基本样式。它需要放在所有CSS引用的最前面。它包括：标签reset、常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式等
参见： http://img3.douban.com/css/packed_core1.css
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, .nav, .list, .item, .tag, .pic, .info |
9. 尽量避免使用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() { … } |
| 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) { … } |
10. 使用after或overflow的方式清浮动
11. 内联和外联的CSS都必须放在页面的head里。顺序是：全站级CSS，产品级CSS，页面级(外联)CSS，页面级(内联)CSS，内联CSS
12. 避免使用低效的选择器
如：
body > * {…}
ul > li > a {…}
#footer > h3 {…}
ul#top_blue_nav {…}
#searbar span.submit a { … }
13. 尽量避免使用filter
14. 不要直接修改标签的样式
如： div { … }
15. 不要在标签上直接写样式
如：<div style=”margin-bottom:30px;”>