資源描述:
《前端開發(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分類的命名方法:使用單個字母