豆瓣网前端开发规范之-css开发规范

 

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

1. 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:value9
非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中使用 “*” 选择符