豆瓣CSS和JavaScript开发规范

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;">

\16. 不要在CSS中使用 expression

\17. 不要在CSS中使用 @import

\18. 不要在CSS中使用 !important

\19. 绝对不要在CSS中使用 "*" 选择符

转自：豆瓣CSS开发规范

JavaScript开发规范

Douban Javascript Core Style Guideline

\1. Javascript代码应符合Douban-JSLint检验标准

1-1. 语句必须都有分号结尾，除了for, function, if, switch, try, while

1-2. 只有长语句可以考虑断行，如：

TEMPL_SONGLIST.replace('{TABLE}', da['results']) .replace('{PREV_NUM}', prev) .replace('{NEXT_NUM}', next) .replace('{CURRENT_NUM}', current) .replace('{TOTAL_NUM}', da.page_total);

为了避免和JSLint的检验机制冲突，“.”或“＋”这类操作符放在行尾，上面代码应改为：

TEMPL_SONGLIST.replace('{TABLE}', da['results']). replace('{PREV_NUM}', prev). replace('{NEXT_NUM}', next). replace('{CURRENT_NUM}', current). replace('{TOTAL_NUM}', da.page_total);

1-3. 避免额外的逗号。如：var arr = [1,2,3,];

1-4. 所有的循环体和判断体都需要用"{}"括起来。如：

错：

if (condition) statement; 或 if (condition) statement;

对:

if (condition) { statement; } 或 if (condition) { statement; }

1-5. for-in循环体中必须用hasOwnProperty方法检查成员是否为自身成员。避免来自原型链上的污染。

1-6. 变量声明。变量声明应放在function的最上面。避免使用未声明的变量。

错：

if (n > 0) { var isvalid = true; }

对：

var isvalid; if (n > 0) { isvalid = true; }

1-7. 不要使用with, void, evil。

1-8. 使用严格的条件判断符。用===代替==，用!==代替!=。

1-9. 下面类型的对象不建议用new构造：new Number, new String, new Boolean, new Object(用{}代替), new Array(用[]代替)。

1-10. 引用对象成员用obj.prop1代替obj[“prop1”]，除非属性名是变量。

注：Douban-JSLint是定制过的JSLint

注：如果模块代码中，使用其它全局变量想跳过JSLint的检查，可以在该文件中加入/global/声明，如： /*global alert: true, console: true, top: true, setTimeout: true */

\2. Javascript命名规则

2-1. 构造器的首字母大写。如：

function Dialog (config) { statement; }

var dlg = new Dialog({...});

2-2. 对象的属性或方法名采用小驼峰式(lower camel-case)，如"init", "bindEvent", "updatePosition"：

Dialog.prototype = { init: function () {}, bindEvent: function () {}, updatePosition: function () {} ... };

2-3. 私有变量名用下划线开头。如："_current", "_defaultConfig"

2-4. 常量名全部大写，单词间用下划线分隔。如：“CSS_BTN_CLOSE”, "TXT_LOADING"

2-5. 变量名的前缀：

Prefix	Element	Example
n	integer	nVariableName
i,j,k,m,n, etc. *	integer as counter/iterator	(for i=0; i <= oArray.length; i++)
s	string	sVariableName
o	object	oObjectName
is, can, has	boolean	[Boolean name]ConditionName
event method	event attachment	[event type]_MethodName
get	accessor method	getMethodName
set	accessor method	setMethodName

Note: Only a counter/iterator should use a single-letter designation.

\3. 代码格式化要求

3-1. 语句中的必要空格和缩进

3-1-1. 用来包含语句的"()"前后需要跟空格，诸如： if / for / while / switch ( statements ) { … } 等

3-1-2. "="前后需要跟空格

3-1-3. 数组成员间的","后面需要跟空格

不好：

for (t in selected) { if (!hash[t]) deselect(t) }

好：

for ( t in selected ) { if ( !hash[t] ) { deselect(t); } }

3-2. 长语句采用断行:

不好：

TEMPL_SONGLIST.replace('{TABLE}', da['results']).replace('{PREV_NUM}', prev).replace('{NEXT_NUM}', next).replace('{CURRENT_NUM}', current).replace('{TOTAL_NUM}', da.page_total);

好：

TEMPL_SONGLIST.replace('{TABLE}', da['results']). replace('{PREV_NUM}', prev). replace('{NEXT_NUM}', next). replace('{CURRENT_NUM}', current). replace('{TOTAL_NUM}', da.page_total);

3-3. 格式化对象参数：

不好：

embedSWF(id, { url: '/swf/player30792.swf?url=' + el.href, width: 261, height: 30, params: { wmode:'transparent' }, attributes: { id: "player-sample" + i, name: "player-sample" + i }});

好：

embedSWF(id, { url: '/swf/player30792.swf?url=' + el.href, width: 261, height: 30, params: { wmode:'transparent' }, attributes: { id: "player-sample" + i, name: "player-sample" + i } });