資源描述：
《前端開(kāi)發(fā)規(guī)范》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。
1、前端開(kāi)發(fā)規(guī)范2013年6月24日1CSS規(guī)范1.1分類(lèi)方法1.1.1CSS文件的分類(lèi)和引用順序通常，一個(gè)項(xiàng)目我們只引用一個(gè)CSS，但是對(duì)于較大的項(xiàng)目，我們需要把CSS文件進(jìn)行分類(lèi)。我們按照CSS的性質(zhì)和用途，將CSS文件分成“公共型樣式”、“特殊型樣式”、“皮膚型樣式”，并以此順序引用（按需求決定是否添加版本號(hào)）。1.公共型樣式：包括了以下幾個(gè)部分：“標(biāo)簽的重置和設(shè)置默認(rèn)值”、“統(tǒng)一調(diào)用背景圖和清除浮動(dòng)或其他需統(tǒng)一處理的樣式”、“網(wǎng)站通用布局”、“通用模塊和其擴(kuò)展”、“元件和其擴(kuò)展”、“功能類(lèi)樣式”、“皮膚類(lèi)樣式”。2.特殊型樣式：當(dāng)某個(gè)欄目或頁(yè)面的樣式與網(wǎng)站整體差異較大或者維護(hù)率較高時(shí)，
2、可以獨(dú)立引用一個(gè)樣式：“特殊的布局、模塊和元件及擴(kuò)展”、“特殊的功能、顏色和背景”，也可以是某個(gè)大型控件或模塊的獨(dú)立樣式。3.皮膚型樣式：如果產(chǎn)品需要換膚功能，那么我們需要將顏色、背景等抽離出來(lái)放在這里。1
3、.1.2CSS內(nèi)部的分類(lè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-）：
4、通常是一個(gè)不可再分的較為小巧的個(gè)體，通常被重復(fù)用于各種模塊中！比如按鈕、輸入框、loading、圖標(biāo)等！6.功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來(lái)，按需使用，通常這些選擇器具有固定樣式表現(xiàn)，比如清除浮動(dòng)等！不可濫用！7.皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來(lái)，通常為文字色、背景色（圖）、邊框色等，非換膚型網(wǎng)站通常只提取文字色！非換膚型網(wǎng)站不可濫用此類(lèi)！8.狀態(tài)（.z-）：為狀態(tài)類(lèi)樣式加入前綴，統(tǒng)一標(biāo)識(shí)，方便識(shí)別，她只能組合使用或作為后代出現(xiàn)（.u-ipt.z-dis{}，.m-listli.z-sel{}），具
5、體詳見(jiàn)命名規(guī)則的擴(kuò)展相關(guān)項(xiàng)。9.功能類(lèi)和皮膚類(lèi)樣式為表現(xiàn)化的樣式，請(qǐng)不要濫用！以上順序可以按需求適當(dāng)調(diào)整。10.以上分類(lèi)的命名方法詳見(jiàn)命名規(guī)則1./*重置*/2.div,p,ul,ol,li{margin:0;padding:0;}3./*默認(rèn)*/4.strong,em{font-style:normal;font-weight:bold;}5./*統(tǒng)一調(diào)用背景圖*/6..m-logoa,.m-nava,.m-navem{background:url(images/sprite.png)no-repeat9999px9999px;}7./*統(tǒng)一清除浮動(dòng)*/8..g-bdc:after,.m
6、-dimgul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}9..g-bdc,.m-dimgul,.u-tab{zoom:1;}10./*布局*/11..g-sd{float:left;width:300px;}12./*模塊*/13..m-logo{width:200px;height:50px;}14./*元件*/15..u-btn{height:20px;border:1pxsolid#333;}16./*功能*/17..f-ta
7、c{text-align:center;}18./*皮膚*/19..s-fc,a.s-fc:hover{color:#fff;}1.2命名規(guī)則1.2.1使用類(lèi)選擇器，放棄ID選擇器ID在一個(gè)頁(yè)面中的唯一性導(dǎo)致了如果以ID為選擇器來(lái)寫(xiě)CSS，就無(wú)法重用。1.2.2特殊字符："-"連字符"-"在本規(guī)范中并不表示連字符的含義。她只表示兩種含義：分類(lèi)前綴分隔符、擴(kuò)展分隔符，詳見(jiàn)以下具體規(guī)則。1.2.3分類(lèi)的命名方法：使用單個(gè)字母
