資源描述：
《前端開發(fā)規(guī)范》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、前端開發(fā)規(guī)范2013年6月24日1CSS規(guī)范1.1分類方法1.1.1CSS文件的分類和引用順序通常，一個項目我們只引用一個CSS，但是對于較大的項目，我們需要把CSS文件進行分類。我們按照CSS的性質(zhì)和用途，將CSS文件分成“公共型樣式”、“特殊型樣式”、“皮膚型樣式”，并以此順序引用（按需求決定是否添加版本號）。1.公共型樣式：包括了以下幾個部分：“標簽的重置和設(shè)置默認值”、“統(tǒng)一調(diào)用背景圖和清除浮動或其他需統(tǒng)一處理的樣式”、“網(wǎng)站通用布局”、“通用模塊和其擴展”、“元件和其擴展”、“功能類樣式”、“皮膚類樣式”。2.特殊型樣式：當某個欄目或頁面的樣式與網(wǎng)站整體差異較大或者維護率較高時，
2、可以獨立引用一個樣式：“特殊的布局、模塊和元件及擴展”、“特殊的功能、顏色和背景”，也可以是某個大型控件或模塊的獨立樣式。3.皮膚型樣式：如果產(chǎn)品需要換膚功能，那么我們需要將顏色、背景等抽離出來放在這里。1
3、.1.2CSS內(nèi)部的分類及其順序1.重置（reset）和默認（base）（tags）：消除默認樣式和瀏覽器差異，并設(shè)置部分標簽的初始樣式，以減少后面的重復勞動！你可以根據(jù)你的網(wǎng)站需求設(shè)置！2.統(tǒng)一處理：建議在這個位置統(tǒng)一調(diào)用背景圖（這里指多個布局或模塊或元件共用的圖）和清除浮動（這里指通用性較高的布局、模塊、元件內(nèi)的清除）等統(tǒng)一設(shè)置處理的樣式！3.布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側(cè)欄、尾部等！4.模塊（module）（.m-）：通常是一個語義化的可以重復使用的較大的整體！比如導航、登錄、注冊、各種列表、評論、搜索等！5.元件（unit）（.u-）：
4、通常是一個不可再分的較為小巧的個體，通常被重復用于各種模塊中！比如按鈕、輸入框、loading、圖標等！6.功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現(xiàn)，比如清除浮動等！不可濫用！7.皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網(wǎng)站通常只提取文字色！非換膚型網(wǎng)站不可濫用此類！8.狀態(tài)（.z-）：為狀態(tài)類樣式加入前綴，統(tǒng)一標識，方便識別，她只能組合使用或作為后代出現(xiàn)（.u-ipt.z-dis{}，.m-listli.z-sel{}），具
5、體詳見命名規(guī)則的擴展相關(guān)項。9.功能類和皮膚類樣式為表現(xiàn)化的樣式，請不要濫用！以上順序可以按需求適當調(diào)整。10.以上分類的命名方法詳見命名規(guī)則1./*重置*/2.div,p,ul,ol,li{margin:0;padding:0;}3./*默認*/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)一清除浮動*/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使用類選擇器，放棄ID選擇器ID在一個頁面中的唯一性導致了如果以ID為選擇器來寫CSS，就無法重用。1.2.2特殊字符："-"連字符"-"在本規(guī)范中并不表示連字符的含義。她只表示兩種含義：分類前綴分隔符、擴展分隔符，詳見以下具體規(guī)則。1.2.3分類的命名方法：使用單個字母
