通常，一個項目我們只引用一個CSS，但是對於較大的項目，我們需要把CSS文件進行分類。
我們按照CSS的性質和用途，將CSS文件分成“公共型樣式”、“特殊型樣式”、“皮膚型樣式”，並以此順序引用（按需求決定是否添加版本號）。
- 公共型樣式：包括了以下幾個部分：“標籤的重置和設置默認值”、“統一調用背景圖和清除浮動或其他需統一處理的長樣式”、“網站通用佈局”、“通用模塊和其擴展”、“元件和其擴展”、“功能類樣式”、“皮膚類樣式”。
- 特殊型樣式：當某個欄目或頁面的樣式與網站整體差異較大或者維護率較高時，可以獨立引用一個樣式：“特殊的佈局、模塊和元件及擴展”、“特殊的功能、顏色和背景”，也可以是某個大型控件或模塊的獨立樣式。
- 皮膚型樣式：如果產品需要換膚功能，那麼我們需要將顏色、背景等抽離出來放在這裏。
|
1
2
3
|
<link href="assets/css/global.css" rel="stylesheet" type="text/css"/><link href="assets/css/index.css" rel="stylesheet" type="text/css"/><link href="assets/css/skin.css" rel="stylesheet" type="text/css"/> |
- 重置（reset）和默認（base）（tags）：消除默認樣式和瀏覽器差異，並設置部分標籤的初始樣式，以減少後面的重複勞動！你可以根據你的網站需求設置！
- 統一處理：建議在這個位置統一調用背景圖（這裏指多個佈局或模塊或元件共用的圖）和清除浮動（這裏指通用性較高的佈局、模塊、元件內的清除）等統一設置處理的樣式！
- 佈局（grid）（.g-）：將頁面分割爲幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！
- 模塊（module）（.m-）：通常是一個語義化的可以重複使用的較大的整體！比如導航、登錄、註冊、各種列表、評論、搜索等！
- 元件（unit）（.u-）：通常是一個不可再分的較爲小巧的個體，通常被重複用於各種模塊中！比如按鈕、輸入框、loading、圖標等！
- 功能（function）（.f-）：爲方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！
- 皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常爲文字色、背景色（圖）、邊框色等，非換膚型網站通常只提取文字色！非換膚型網站不可濫用此類！
- 狀態（.z-）：爲狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或作爲後代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}），具體詳見命名規則的擴展相關項。
功能類和皮膚類樣式爲表現化的樣式，請不要濫用！以上順序可以按需求適當調整。
以上分類的命名方法詳見命名規則
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/*
重置 */div,p,ul,ol,li{margin:0;padding:0;}/*
默認 */strong,em{font-style:normal;font-weight:bold;}/*
統一調用背景圖 */.m-logo
a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}/*
統一清除浮動 */.g-bdc:after,.m-dimg
ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}.g-bdc,.m-dimg
ul,.u-tab{zoom:1;}/*
佈局 */.g-sd{float:left;width:300px;}/*
模塊 */.m-logo{width:200px;height:50px;}/*
元件 */.u-btn{height:20px;border:1px solid #333;}/*
功能 */.f-tac{text-align:center;}/*
皮膚 */.s-fc,a.s-fc:hover{color:#fff;} |