CSS規(guī)范 - 分類方法
CSS文件的分類和引用順序
通常衣陶，一個(gè)項(xiàng)目我們只引用一個(gè)CSS财饥，但是對(duì)于較大的項(xiàng)目墩衙，我們需要把CSS文件進(jìn)行分類务嫡。
我們按照CSS的性質(zhì)和用途，將CSS文件分成“公共型樣式”漆改、“特殊型樣式”心铃、“皮膚型樣式”，并以此順序引用（按需求決定是否添加版本號(hào)）挫剑。
公共型樣式：包括了以下幾個(gè)部分：“標(biāo)簽的重置和設(shè)置默認(rèn)值”去扣、“統(tǒng)一調(diào)用背景圖和清除浮動(dòng)或其他需統(tǒng)一處理的長(zhǎng)樣式”、“網(wǎng)站通用布局”樊破、“通用模塊和其擴(kuò)展”愉棱、“元件和其擴(kuò)展”、“功能類樣式”哲戚、“皮膚類樣式”奔滑。
特殊型樣式：當(dāng)某個(gè)欄目或頁(yè)面的樣式與網(wǎng)站整體差異較大或者維護(hù)率較高時(shí)，可以獨(dú)立引用一個(gè)樣式：“特殊的布局顺少、模塊和元件及擴(kuò)展”朋其、“特殊的功能、顏色和背景”脆炎，也可以是某個(gè)大型控件或模塊的獨(dú)立樣式梅猿。
皮膚型樣式：如果產(chǎn)品需要換膚功能，那么我們需要將顏色腕窥、背景等抽離出來(lái)放在這里粒没。
<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內(nèi)部的分類及其順序
1.重置(reset)和默認(rèn)(base)(tags)：消除默認(rèn)樣式和瀏覽器差異，并設(shè)置部分標(biāo)簽的初始樣式簇爆，以減少后面的重復(fù)勞動(dòng)癞松！你可以根據(jù)你的網(wǎng)站需求設(shè)置！
2.統(tǒng)一處理：建議在這個(gè)位置統(tǒng)一調(diào)用背景圖（這里指多個(gè)布局或模塊或元件共用的圖）和清除浮動(dòng)（這里指通用性較高的布局入蛆、模塊响蓉、元件內(nèi)的清除）等統(tǒng)一設(shè)置處理的樣式！
3.布局(grid)(.g-)：將頁(yè)面分割為幾個(gè)大塊哨毁，通常有頭部枫甲、主體、主欄扼褪、側(cè)欄想幻、尾部等！
4.模塊(module)(.m-)：通常是一個(gè)語(yǔ)義化的可以重復(fù)使用的較大的整體话浇！比如導(dǎo)航脏毯、登錄、注冊(cè)幔崖、各種列表食店、評(píng)論、搜索等赏寇！
5.元件(unit)(.u-）：通常是一個(gè)不可再分的較為小巧的個(gè)體吉嫩，通常被重復(fù)用于各種模塊中！比如按鈕嗅定、輸入框自娩、loading、圖標(biāo)等渠退！
6.功能(function)（.f-）：為方便一些常用樣式的使用忙迁，我們將這些使用率較高的樣式剝離出來(lái)，按需使用智什，通常這些選擇器具有固定樣式表現(xiàn)动漾，比如清除浮動(dòng)等！不可濫用荠锭！
7.皮膚(skin)(.s-）：如果你需要把皮膚型的樣式抽離出來(lái)旱眯，通常為文字色、背景色（圖）证九、邊框色等删豺，非換膚型網(wǎng)站通常只提取文字色！非換膚型網(wǎng)站不可濫用此類愧怜！
8.狀態(tài)(.z-)：為狀態(tài)類樣式加入前綴呀页，統(tǒng)一標(biāo)識(shí)，方便識(shí)別拥坛，她只能組合使用或作為后代出現(xiàn)（.u-ipt.z-dis{}蓬蝶，.m-list li.z-sel{}）尘分，具體詳見(jiàn)命名規(guī)則的擴(kuò)展相關(guān)項(xiàng)。
功能類和皮膚類樣式為表現(xiàn)化的樣式丸氛，請(qǐng)不要濫用培愁！以上順序可以按需求適當(dāng)調(diào)整。
以上分類的命名方法詳見(jiàn)命名規(guī)則
/* 重置 */
div,p,ul,ol,li{margin:0;padding:0;}
/* 默認(rèn) */
strong,em{font-style:normal;font-weight:bold;}
/* 統(tǒng)一調(diào)用背景圖 */
.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}
/* 統(tǒng)一清除浮動(dòng) */
.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;}
