源地址：https://docs.google.com/document/pub?id=17dKkWwdaKyNnkwswihHje2cfoMGqbSJLydTIxqFwlQU

豆瓣CSS開發規范

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中使用 "*" 選擇符

轉載于:https://www.cnblogs.com/ginowang42/archive/2011/05/23/2054013.html

總結

以上是生活随笔為你收集整理的豆瓣CSS开发规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。