Douban CSS Code Guideline

1. CSS瀏覽器支持標準

（注：根據2010年11月10日數據整理）

1. A級－交互和視覺(jué)完全符全設計的要求
2. B級－視覺(jué)上允許有所差異，不破壞頁(yè)面整體效果
3. C級－可忽視視覺(jué)上的問(wèn)題，但不防礙使用

2. 盡可能的通過(guò)繼承和層疊重用已有樣式

3. 根據新建樣式的適用范圍分為三級：全站級、產(chǎn)品級、頁(yè)面級

1. 3-1. 目前全站級的CSS文件僅有core.css和douban.css(向全站級CSS文件中添加規則參見(jiàn)4和5)。
2. 3-2. 產(chǎn)品級CSS是指作用于某一垂直產(chǎn)品（如音樂(lè )、讀書(shū)、電臺等），文件放在css/下相應目錄下。

頁(yè)面級指僅在一個(gè)或少量幾個(gè)頁(yè)面中用到。如果僅在一個(gè)頁(yè)面中用到的采用內聯(lián)方式嵌入于頁(yè)面head里，多于兩個(gè)頁(yè)面的放到外聯(lián)的CSS文件中，該文件再放到相應的產(chǎn)品目錄下。

4. core.css是全站基本樣式。它需要放在所有CSS引用的最前面。它包括：標簽reset、常用規則(鏈接、字體、隱藏、清浮動(dòng)等)、布局、各種模塊基本樣式等

參見(jiàn)：http://img3.douban.com/css/packed_core1.css

5. 不要輕易改動(dòng)全站級CSS。改動(dòng)后，要經(jīng)過(guò)全面測試

6. 單條CSS規則的書(shū)寫(xiě)格式要求

1. 6-1. 屬性需要寫(xiě)在一行。需要在“{"和"}”前后加空格。

     .selector { property:value;property:value; }

2. 6-2. 多個(gè)(>2)selector每個(gè)占一行：

     .selector1,
     .selector2,
     .selector3 { property:value;property:value; }

3. 6-3. 兼容多個(gè)瀏覽器時(shí)，將標準屬性寫(xiě)在后面，如：

     -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;

7. 將作用于不同模塊的CSS規則集中放在一起，同時(shí)用注釋說(shuō)明

注釋的格式：

     /* mod: doulist */

通用規則同樣分類(lèi)放在一起。通用規則在具體模塊規則的前面。如：

     /* button */
     ...
     /* mod */
     ...
     /* nav */
     ...
     /* mod: events album */

8. ID和Class命名。命名不要用縮寫(xiě)，單詞間用"-"做為連接符

1. 8-1. ID是用來(lái)標識具體模塊，命名必須具體且唯一，由前綴和名字組成。不要濫用ID。如： #db-video-list。
2. 8-2. Class是用來(lái)標識某一類(lèi)型的元素，命名簡(jiǎn)潔表意清楚。如：.list。
3. 8-3. 命名示例：

     壞：

     #rec
     .gray-link
     .broadsmr
     .pl

     好：

     #db-nav-main
     .infobox

     .item

1. 8-4. 推薦使用的class名：

9. 盡量避免使用CSS Hack

推薦使用下面的：

區別屬性：

區別規則：

10. 使用after或overflow的方式清浮動(dòng)

11. 內聯(lián)和外聯(lián)的CSS都必須放在頁(yè)面的head里。順序是：全站級CSS，產(chǎn)品級CSS，頁(yè)面級(外聯(lián))CSS，頁(yè)面級(內聯(lián))CSS，內聯(lián)CSS

12. 避免使用低效的選擇器

如：
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }

13. 盡量避免使用filter

14. 不要直接修改標簽的樣式

如： div { ... }

15. 不要在標簽上直接寫(xiě)樣式

如：<div style="margin-bottom:30px;">

16. 不要在CSS中使用 expression

17. 不要在CSS中使用 @import

18. 不要在CSS中使用 !important

19. 絕對不要在CSS中使用 "*" 選擇符

最后更新日期：2010年11月17日