清華大佬耗費三個月吐血整理的幾百G的資源，免費分享！....>>>

CSS文件的分類和引用順序

通常，一個項目我們只引用一個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"/> 

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;}