└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | Douban CSS Code Guideline 
  2 | ===================
  3 | 
  4 |  1. CSS浏览器支持标准 
  5 | -------------------
  6 | 
  7 | <table width="50%">
  8 | <tbody><tr><td> </td><td> WinXP </td><td> Win7 </td><td> OS X 
  9 | </td></tr><tr><td> IE9 </td><td> B  </td><td> B </td><td> 
 10 | </td></tr><tr><td> IE8 </td><td> A  </td><td> A </td><td> 
 11 | </td></tr><tr><td> IE7 </td><td> B  </td><td> B </td><td> 
 12 | </td></tr><tr><td> IE6 </td><td> B  </td><td> B </td><td> 
 13 | </td></tr><tr><td> Chrome16 </td><td> A  </td><td> A </td><td> A 
 14 | </td></tr><tr><td> Chrome14 </td><td> A  </td><td> A </td><td> A 
 15 | </td></tr><tr><td> Firefox10 </td><td> A </td><td> A </td><td> A 
 16 | </td></tr><tr><td> Firefox9 </td><td> A  </td><td> A </td><td> A 
 17 | </td></tr><tr><td> Safari </td><td> B  </td><td> B </td><td> B 
 18 | </td></tr><tr><td> Opera </td><td> C  </td><td> C </td><td> C 
 19 | </td></tr></tbody></table>
 20 | 
 21 | （注：根据2012年4月数据整理）
 22 | 
 23 | *  A级－交互和视觉完全符全设计的要求
 24 | *  B级－视觉上允许有所差异，但不破坏页面的整体效果
 25 | *  C级－可忽略设计上的细节，但不防碍使用
 26 | 
 27 | 
 28 | 2. 重用已有的样式库
 29 | ---------------------
 30 |  * 2-1. 主站全局CSS文件 - douban.css (注意：新项目中不推荐使用)
 31 |  * 2-2. 兼容主站的全局CSS文件 - /css/core/_init_.css
 32 |  * 2-3. 当前使用的CSS库（持续更新）
 33 |    * util-01 reset /css/core/reset.css
 34 |    * util-02 通用模块容器 /css/core/mod.css
 35 |    * ui-01. 喜欢按钮  /css/core/fav_btn.css
 36 |    * ui-02. 视频/相册列表项 /css/core/media_item.css
 37 |    * ui-03. 评星 /css/core/rating.css
 38 |    * ui-04. 通用按钮 /css/core/common_button.css
 39 |    * ui-05. 分页 /css/core/pagination.css
 40 |    * ui-06. 推荐按钮 /css/core/rec_btn.css
 41 |    * ui-07. 老版对话框 /css/core/old_dialog.css
 42 |    * ui-08. 老版Tab /css/core/old_tab.css
 43 |    * ui-09. 老版成员列表 /css/core/old_userlist.css
 44 |    * ui-10. 老版信息区 /css/core/notify.css
 45 |    * ui-11. 社区用户导航 /css/core/profile_nav.css
 46 |    * ui-12. 当前大社区导航 /css/core/site_nav.css
 47 |    * ui-13. 加载中 /css/lib/loading.css
 48 | 
 49 | 3. CSS文件的目录管理
 50 | ---------------------
 51 | 所有的CSS分为两大类：通用类和业务类。
 52 | 
 53 |  * 3-1. 通用的CSS文件，放在如下目录中：
 54 | <table width="300" style="margin-left:60px;">
 55 | <tbody><tr><td> 基本样式库 </td><td style="text-align: left"> /css/core 
 56 | </td></tr><tr><td> 通用UI元素样式库 </td><td style="text-align: left"> /css/lib
 57 | </td></tr><tr><td> JS组件相关样式库 </td><td style="text-align: left"> /css/ui
 58 | </td></tr></tbody></table>
 59 | 
 60 |  * 3-2. 业务类的CSS是指和具体产品（如音乐、读书等）相关的文件，放在如下目录中：
 61 | <table width="200" style="margin-left:60px;">
 62 | <tbody><tr><td> 读书 </td><td style="text-align: left"> /css/book/ 
 63 | </td></tr><tr><td> 电影 </td><td style="text-align: left"> /css/movie/ 
 64 | </td></tr><tr><td> 音乐 </td><td style="text-align: left"> /css/music/ 
 65 | </td></tr><tr><td> 社区 </td><td style="text-align: left"> /css/sns/ 
 66 | </td></tr><tr><td> 小站 </td><td style="text-align: left"> /css/site/ 
 67 | </td></tr><tr><td> 同城 </td><td style="text-align: left"> /css/location/ 
 68 | </td></tr><tr><td> 电台 </td><td style="text-align: left"> /css/radio/ 
 69 | </td></tr><tr><td> 九点 </td><td style="text-align: left"> /css/newnine/ 
 70 | </td></tr><tr><td> 商务 </td><td style="text-align: left"> /css/biz/ 
 71 | </td></tr><tr><td style="text-align: center">  ...  </td><td style="text-align: left"> /css/产品名称 
 72 | </td></tr></tbody></table>
 73 | 
 74 |  * 3-3. 外联CSS文件适用于全站级和产品级通用的大文件。
 75 |  * 3-4. 内联CSS文件适用于在一个或几个页面共用的CSS。利用模板系统支持的istatic方法引用。
 76 |  * 3-5. 模块依赖的CSS和模块放在一起。利用模板系统支持的collect_css过滤器实现。
 77 | 
 78 | 4. CSS的模块化组织 
 79 | ---------------------
 80 | 
 81 | 当前静态文件管理系统已支持SCSS和导入语法。开发中，应尽量按功能分解大文件，实现模块化的文件组织。
 82 | 
 83 |  * 使用和完善现有CSS库（见2-4）。
 84 |  * 单个CSS文件避免过大（建议少于300行）。
 85 |  * CSS文件嵌套不要超过一层
 86 | 
 87 | 5. 不要轻易改动全站级CSS和通用CSS库。改动后，要经过全面测试
 88 | ---------------------------------------------------------
 89 | 
 90 | 6. 单条CSS规则的书写格式要求
 91 | ---------------------
 92 | 
 93 |  * 6-1. 单行形式适用于直接写在页面中和长文件的情况。声明写在一行。需要在“{"和"}”前后加空格。
 94 | （注：在很长的文件中，单行形式有利于检索选择器）
 95 | 
 96 | ```css
 97 |     .selector { property:value;property:value; }
 98 | ```
 99 | 
100 | 简短规则声明（1或2个）也适用单行形式。
101 | 
102 | ```css
103 |     .selector { property:value; }
104 | ```
105 | 
106 |  * 6-2. 格式化书写形式。适用于不是很长的模块文件或CSS3语法。冒号后加空格。
107 | 
108 | ```css
109 |     .selector { 
110 |         property: value;
111 |         property: value; 
112 |     }
113 | ```
114 | 
115 | CSS3兼容书写形式和对齐方式：
116 | 
117 | ```css
118 |     .selector { 
119 |       -webkit-box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
120 |          -moz-box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
121 |               box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
122 |     }
123 | ```
124 | 
125 | CSS3中逗号分隔的长属性值：
126 | 
127 | ```css
128 |     .selector {
129 |         box-shadow:
130 |             1px 1px 1px #000,
131 |             2px 2px 1px 1px #ccc inset;
132 |         background-image:
133 |             linear-gradient(#fff, #ccc),
134 |             linear-gradient(#f3c, #4ec);
135 |     }
136 | ```
137 | 
138 |  * 6-3. 多个(>2)selector每个占一行：
139 | 
140 | ```css
141 |     .selector1,
142 |     .selector2,
143 |     .selector3 { ... }
144 | ```
145 | 
146 |  * 6-4. 规则声明的顺序：定位、盒模型（width/height/padding/border/margin）、行高、字体/字号/颜色、背景、CSS3效果等
147 | 
148 |  * 6-5. 兼容多个浏览器时，将标准规则声明写在后面，如：
149 | 
150 | ```css
151 |     -webkit-border-radius: 4px;
152 |        -moz-border-radius: 4px;
153 |             border-radius: 4px;
154 | ```
155 | 
156 | 
157 | 7.  注释书写形式
158 | --------------
159 |  * 7-1. 注释内容单行控制在40个中文或80个英文字符宽。注释的格式：
160 | 
161 | ```css
162 |      /* 
163 |       * mod: doulist 
164 |       * 描述内容
165 |       */
166 | ```
167 | 
168 | SCSS中支持单行注释
169 | 
170 | ```css
171 |     // mod: doulist
172 | ```
173 | 
174 |  * 7-2. 规则分类放在一起。通用规则在具体业务规则的前面。如：
175 | 
176 | ```css
177 |     /* layout */
178 |     ...
179 |     /* mod */
180 |     ...
181 |     /* nav */
182 |     ...
183 |     /* mod: events album */
184 |     ...
185 | ```
186 | 
187 | 8. ID和Class命名。命名不要用缩写(除一些公认的缩写，见8-4)，单词间用"-"做为连接符
188 | -----------------------------------------------------------------------
189 |  * 8-1. ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。不要滥用ID。如： #db-video-list、#group-member-list等。
190 |  * 8-2. Class是用来标识某一类型的对象，命名简洁表意清楚。如：.list。
191 |  * 8-3. 命名示例：
192 | 
193 | 坏：
194 | 
195 | ```css
196 |     #rec
197 |     .gray-link
198 |     .broadsmr
199 |     .pl
200 | ```   
201 | 
202 | 好：
203 | 
204 | ```css
205 |     #db-nav-main
206 |     .infobox
207 |     .item
208 | ```
209 | 
210 |  * 8-4. 推荐使用的class名：
211 | <table width="400" style="margin-left:60px;">
212 | <tbody><tr><td> 表示状态 </td><td style="text-align:left;"> .on, .active, .selected, .hili 
213 | </td></tr><tr><td> 表示位置 </td><td style="text-align:left;"> .first, .last, .main, .side 
214 | </td></tr><tr><td> 表示结构 </td><td style="text-align:left;"> .hd, .bd, .ft, .col, .section 
215 | </td></tr><tr><td> 通用元素</td><td style="text-align:left;"> .tb, .frm, .nav, .list, .item, .tag, .pic, .info 
216 | </td></tr></tbody></table>
217 | 
218 | 
219 | 9. 避免滥用CSS Hack
220 | -----------------------
221 | 推荐使用下面的：
222 | 
223 | 区别属性：
224 | <table width="300" style="margin-left:60px;">
225 | <tbody><tr><td> IE6 </td><td style="text-align:left;"> _property:value 
226 | </td></tr><tr><td> IE6/7 </td><td style="text-align:left;"> *property:value 
227 | </td></tr><tr><td> IE6/7/8/9 </td><td style="text-align:left;"> property:value\9 
228 | </td></tr></tbody></table>
229 | 区别规则：
230 | <table width="70%" style="margin-left:60px;">
231 | <tbody><tr><td> IE6 </td><td style="text-align:left;"> * html selector { ... } 
232 | </td></tr><tr><td> IE7 </td><td style="text-align:left;"> *:first-child+html selector { ... } 
233 | </td></tr><tr><td> 非IE6 </td><td style="text-align:left;"> html&gt;body selector { ... } 
234 | </td></tr><tr><td> firefox only </td><td style="text-align:left;"> @-moz-document url-prefix() { ... } 
235 | </td></tr><tr><td> saf3+/chrome1+ </td><td style="text-align:left;"> @media all and (-webkit-min-device-pixel-ratio:0) { ... } 
236 | </td></tr><tr><td> opera only </td><td style="text-align:left;"> @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { ... } 
237 | </td></tr><tr><td> iPhone/mobile webkit </td><td style="text-align:left;"> @media screen and (max-device-width: 480px) { ... } 
238 | </td></tr></tbody></table>
239 | 注意：SCSS会自动转换一些不标准CSS写法，会破坏CSS Hack。
240 | 
241 | 
242 | 10. 使用after或overflow的方式清浮动，不要在html里增加多余的标签
243 | --------------------------------------------------------
244 | 
245 | 11. CSS必须放在head里
246 | --------------------
247 | 
248 | 12. 避免使用低效的选择器
249 | ---------------------
250 | 如：
251 | 
252 | ```css
253 |     body > * {...}
254 |     ul > li > a {...}
255 |     #footer > h3 {...}
256 |     ul#top_blue_nav {...}
257 |     #searbar span.submit a { ... }
258 |     .target #target-node { ... }
259 | ```
260 | 
261 |  13. 避免使用filter
262 | --------------------
263 | 
264 | 14. 避免直接定义标签的样式。如： div { ... } 
265 | ---------------------------
266 | 
267 | 15. 避免在标签上直接写样式。如：<div style="margin-bottom:30px;"> 
268 | -----------------------------------------------------------
269 | 
270 | 16. 避免在CSS中使用expression
271 | ---------------------------
272 | 
273 | 17. 避免在CSS中使用@import
274 | ---------------------------
275 | 
276 | 18. 尽量不要在CSS中使用!important
277 | -----------------------------
278 | 
279 | 19. 绝对不要在CSS中使用"*"选择符
280 | ----------------------------
281 | 


--------------------------------------------------------------------------------