**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"/> ~~~ **CSS內部的分類及其順序** 1. 重置（reset）和默認（base）（tags）：消除默認樣式和瀏覽器差異，并設置部分標簽的初始樣式，以減少后面的重復勞動！你可以根據你的網站需求設置！ 2. 統一處理：建議在這個位置統一調用背景圖（這里指多個布局或模塊或元件共用的圖）和清除浮動（這里指通用性較高的布局、模塊、元件內的清除）等統一設置處理的樣式！ 3. 布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！ 4. 模塊（module）（.m-）：通常是一個語義化的可以重復使用的較大的整體！比如導航、登錄、注冊、各種列表、評論、搜索等！ 5. 元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復用于各種模塊中！比如按鈕、輸入框、loading、圖標等！ 6. 功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！ 7. 皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網站通常只提取文字色！非換膚型網站不可濫用此類！ 8. 狀態（.z-）：為狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或作為后代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}），具體詳見命名規則的擴展相關項。 功能類和皮膚類樣式為表現化的樣式，請不要濫用！以上順序可以按需求適當調整。 ~~~ /* 重置 */ 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;} ~~~