Douban CSS Code Guideline
來源：https://github.com/kejun/CSS-Code-Guideline#douban-css-code-guideline-
1. CSS瀏覽器支援標準
| WinXP | Win7 | OS X | |
| IE9 | B | B | |
| IE8 | A | A | |
| IE7 | B | B | |
| IE6 | B | B | |
| Chrome16 | A | A | A |
| Chrome14 | A | A | A |
| Firefox10 | A | A | A |
| Firefox9 | A | A | A |
| Safari | B | B | B |
| Opera | C | C | C |
（注：根據2012年4月資料整理）
- A級－互動和視覺完全符全設計的要求
- B級－視覺上允許有所差異，但不破壞頁面的整體效果
- C級－可忽略設計上的細節，但不防礙使用
2. 重用已有的樣式庫
- 2-1. 主站全域性CSS檔案 - douban.css (注意：新專案中不推薦使用)
- 2-2. 相容主站的全域性CSS檔案 - /css/core/init.css
- 2-3. 當前使用的CSS庫（持續更新）
- util-01 reset /css/core/reset.css
- util-02 通用模組容器 /css/core/mod.css
- ui-01. 喜歡按鈕 /css/core/fav_btn.css
- ui-02. 視訊/相簿列表項 /css/core/media_item.css
- ui-03. 評星 /css/core/rating.css
- ui-04. 通用按鈕 /css/core/common_button.css
- ui-05. 分頁 /css/core/pagination.css
- ui-06. 推薦按鈕 /css/core/rec_btn.css
- ui-07. 老版對話方塊 /css/core/old_dialog.css
- ui-08. 老版Tab /css/core/old_tab.css
- ui-09. 老版成員列表 /css/core/old_userlist.css
- ui-10. 老版資訊區 /css/core/notify.css
- ui-11. 社群使用者導航 /css/core/profile_nav.css
- ui-12. 當前大社群導航 /css/core/site_nav.css
- ui-13. 載入中 /css/lib/loading.css
3. CSS檔案的目錄管理
所有的CSS分為兩大類：通用類和業務類。
-
3-1. 通用的CSS檔案，放在如下目錄中：
基本樣式庫 /css/core 通用UI元素樣式庫 /css/lib JS元件相關樣式庫 /css/ui -
3-2. 業務類的CSS是指和具體產品（如音樂、讀書等）相關的檔案，放在如下目錄中：
讀書 /css/book/ 電影 /css/movie/ 音樂 /css/music/ 社群 /css/sns/ 小站 /css/site/ 同城 /css/location/ 電臺 /css/radio/ 九點 /css/newnine/ 商務 /css/biz/ ... /css/產品名稱 -
3-3. 外聯CSS檔案適用於全站級和產品級通用的大檔案。
-
3-4. 內聯CSS檔案適用於在一個或幾個頁面共用的CSS。利用模板系統支援的istatic方法引用。
-
3-5. 模組依賴的CSS和模組放在一起。利用模板系統支援的collect_css過濾器實現。
4. CSS的模組化組織
當前靜態檔案管理系統已支援SCSS和匯入語法。開發中，應儘量按功能分解大檔案，實現模組化的檔案組織。
- 使用和完善現有CSS庫（見2-4）。
- 單個CSS檔案避免過大（建議少於300行）。
- CSS檔案巢狀不要超過一層
5. 不要輕易改動全站級CSS和通用CSS庫。改動後，要經過全面測試
6. 單條CSS規則的書寫格式要求
- 6-1. 單行形式適用於直接寫在頁面中和長檔案的情況。宣告寫在一行。需要在“{"和"}”前後加空格。 （注：在很長的檔案中，單行形式有利於檢索選擇器）
.selector { property:value;property:value; }
簡短規則宣告（1或2個）也適用單行形式。
.selector { property:value; }
- 6-2. 格式化書寫形式。適用於不是很長的模組檔案或CSS3語法。冒號後加空格。
.selector {
property: value;
property: value;
}
CSS3相容書寫形式和對齊方式：
.selector {
-webkit-box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
-moz-box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
}
CSS3中逗號分隔的長屬性值：
.selector {
box-shadow:
1px 1px 1px #000,
2px 2px 1px 1px #ccc inset;
background-image:
linear-gradient(#fff, #ccc),
linear-gradient(#f3c, #4ec);
}
- 6-3. 多個(>2)selector每個佔一行：
.selector1,
.selector2,
.selector3 { ... }
-
6-4. 規則宣告的順序：定位、盒模型（width/height/padding/border/margin）、行高、字型/字號/顏色、背景、CSS3效果等
-
6-5. 相容多個瀏覽器時，將標準規則宣告寫在後面，如：
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
7. 註釋書寫形式
- 7-1. 註釋內容單行控制在40箇中文或80個英文字元寬。註釋的格式：
/*
* mod: doulist
* 描述內容
*/
SCSS中支援單行註釋
// mod: doulist
- 7-2. 規則分類放在一起。通用規則在具體業務規則的前面。如：
/* layout */
...
/* mod */
...
/* nav */
...
/* mod: events album */
...
8. ID和Class命名。命名不要用縮寫(除一些公認的縮寫，見8-4)，單詞間用"-"做為連線符
- 8-1. ID是用來標識具體模組，命名必須具體且唯一，由字首和名字組成。不要濫用ID。如： #db-video-list、#group-member-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 | * 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) { ... } |
注意：SCSS會自動轉換一些不標準CSS寫法，會破壞CSS Hack。
10. 使用after或overflow的方式清浮動，不要在html裡增加多餘的標籤
11. CSS必須放在head裡
12. 避免使用低效的選擇器
如：
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
.target #target-node { ... }