手機前端CSS命名規范一、文件規范1、文件均歸檔至約定的目錄中。具體要求通過豆瓣的CSS規范進行講解：所有的CSS分為兩大類：通用類和業務類。通用的CSS文件，放在如下目錄中： 基本樣式庫/css/core 通用UI元素樣式庫/css/lib JS組件相關樣式庫/css/ui業務類的CSS是指和具體產品相關的文件，放在如下目錄中： 讀書/css/book/ 電影/css/movie/ 音樂/css/music/ 社區/css/sns/ 小站/css/site/ 同城/css/location/ 電臺/css/radio/外聯CSS文件適用于全站級和產品級通用的大文件。內聯CSS文件適用于在一個或幾個頁面共用的CSS。另外一對具體的CSS進行文檔化的整理。如： util-01reset/css/core/reset.css util-02通用模塊容器/css/core/mod.css ui-01.喜歡按鈕/css/core/fav_btn.css ui-02.視頻/相冊列表項/css/core/media_item.css ui-03.評星/css/core/rating.css ui-04.通用按鈕/css/core/common_button.css ui-05.分頁/css/core/pagination.css ui-06.推薦按鈕/css/core/rec_btn.css ui-07.老版對話框/css/core/old_dialog.css ui-08.老版Tab/css/core/old_tab.css ui-09.老版成員列表/css/core/old_userlist.css ui-10.老版信息區/css/core/notify.css ui-11.社區用戶導航/css/core/profile_nav.css ui-12.當前大社區導航/css/core/site_nav.css ui-13.加載中/css/lib/loading.css2、文件引入可通過外聯或內聯方式引入。 外聯方式：（類型聲明type=”text/css”可以省略） 內聯方式：（類型聲明type=”text/css”可以省略） link和style標簽都應該放入head中，原則上，不允許在html上直接寫樣式。避免在CSS中使用import，嵌套不要超過一層。3、文件名、文件編碼及文件大小 文件名必須由小寫字母、數字、中劃線組成 文件必須用UTF-8編碼，使用UTF-8（非BOM），在HTML中指定UTF-8編碼，在CSS中則不需要特別指定因為默認就是UTF-8。 單個CSS文件避免過大（建議少于300行）二、注釋規范1、文件頂部注釋（推薦使用）/*description:中文說明*author:name*update:name(2013-04-1318:32)*/2、模塊注釋/*module:module1by張三*/*module:module2by張三*/模塊注釋必須單獨寫在一行3、單行注釋與多行注釋/*thisisashortcomment*/單行注釋可以寫在單獨一行，也可以寫在行尾，注釋中的每一行長度不超過40個漢字，或者80個英文字符。/*thisiscommentline1.*thisiscommentline2.*/多行注釋必須寫在單獨行內4、特殊注釋/*TODO:xxxxbyname2013-04-1318:32*/*BUGFIX:xxxxbyname2012-04-1318:32*/用于標注修改、待辦等信息5、區塊注釋/*Header*/*Footer*/*Gallery*/對一個代碼區塊注釋（可選），將樣式語句分區塊并在新行中對其注釋。三、命名規范使用有意義的或通用的ID和class命名：ID和class的命名應反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名。反映元素的使用目的是首選；使用通用名稱代表該元素不表特定意義，與其同級元素無異，通常是用于輔助命名；使用功能性或通用的名稱可以更適用于文檔或模版變化的情況。 /*不推薦:無意義*/#yee-1901 /*不推薦:與樣式相關*/.button-green.clear /*推薦:特殊性*/#gallery#login.video /*推薦:通用性*/.aux.alt常用命名（多記多查英文單詞）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等ID和class命名越簡短越好，只要足夠表達涵義。這樣既有助于理解，也能提高代碼效率。 /*不推薦*/#navigation.atr /*推薦*/#nav.author類型選擇器避免同時使用標簽、ID和class作為定位一個元素選擇器；從性能上考慮也應盡量減少選擇器的層級。 /*不推薦*/ul#examplediv.error /*推薦*/#example.error命名時需要注意的點：1. 規則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或_2. 命名避免使用中文拼音，應該采用更簡明有語義的英文單詞進行組合3. 命名注意縮寫，但是不能盲目縮寫，具體請參見常用的CSS命名規則4. 不允許通過1、2、3等序號進行命名5. 避免class與id重名6. id用于標識模塊或頁面的某一個父容器區域，名稱必須唯一，不要隨意新建id7. class用于標識某一個類型的對象，命名必須言簡意賅。8. 盡可能提高代碼模塊的復用，樣式盡量用組合的方式9. 規則名稱中不應該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的信息。應該用意義命名，而不是樣式顯示結果命名。1、常用id的命名：(1)頁面結構 容器:container 頁頭：header 內容：content/container 頁面主體：main 頁尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體布局寬度：wrapper 左右中：leftrightcenter(2)導航 導航：nav 主導航：mainbav 子導航：subnav 頂導航：topnav 邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 菜單：menu 子菜單：submenu 標題:title 摘要:summary(3)功能 標志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊：regsiter 搜索：search 功能區：shop 標題：title 加入：joinus 狀態：status 按鈕：btn 滾動：scroll 標簽頁：tab 文章列表：list 提示信息：msg 當前的:current 小技巧：tips 圖標:icon 注釋：note 指南：guild 服務：service 熱點：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情鏈接：link 版權：copyright2、常用class的命名：(1)顏色:使用顏色的名稱或者16進制代碼,如 .redcolor:red; .f60color:#f60; .ff8600color:#ff8600;(2)字體大小,直接使用”font+字體大小”作為名稱,如 .font12pxfont-size:12px; .font9ptfont-size:9pt;(3)對齊樣式,使用對齊目標的英文名稱,如 .leftfloat:left; .bottomfloat:bottom;(4)標題欄樣式,使用”類別+功能”的方式命名,如 .barnews .barproduct四、書寫規范1、排版規范(1)使用4個空格，而不使用tab或者混用空格+tab作為縮進；(2)規則可以寫成單行，或者多行，但是整個文件內的規則排版必須統一；單行形式書寫風格的排版約束 如果是在html中寫內聯的css，則必須寫成單行； 每一條規則的大括號前后加空格； 每一條規則結束的大括號前加空格； 屬性名冒號之前不加空格，冒號之后加空格； 每一個屬性值后必須添加分號;并且分號后空格； 多個selector共用一個樣式集，則多個selector必須寫成多行形式；多行形式書寫風格的排版約束 每一條規則的大括號前添加空格; 多個selector共用一個樣式集，則多個selector必須寫成多行形式; 每一條規則結束的大括號必須與規則選擇器的第一個字符對齊; 屬性名冒號之前不加空格，冒號之后加空格; 屬性值之后添加分號;2、屬性編寫順序1. 顯示屬性：display/list-style/position/float/clear2. 自身屬性（盒模型）：width/height/margin/padding/border3. 背景：background4. 行高：line-height5. 文本屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content6. 其他：cursor/z-index/zoom/overflow7. CSS3屬性：transform/transition/animation/box-shadow/border-radius8. 如果使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照-webkit-/-moz-/-ms-/-o-/std的順序進行添加，標準屬性寫在最后。9. 鏈接的樣式請嚴格按照如下順序添加：a:link-a:visited-a:hover-a:active3、規則書寫規范1. 使用單引號，不允許使用雙引號;2. 每個聲明結束都應該帶一個分號，不管是不是最后一個聲明;3. 除16進制顏色和字體設置外，CSS文件中的所有的代碼都應該小寫;4. 除了重置瀏覽器默認樣式外，禁止直接為htmltag添加css樣式設置;5. 每一條規則應該確保選擇器唯一，禁止直接為全局.nav/.header/.body等類設置屬性;4、代碼性能優化1. 合并margin、padding、border的-left/-top/-right/-bottom的設置，盡量使用短名稱。2. 選擇器應該在滿足功能的基礎上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設置。3. 注意選擇器的性能，不要使用低性能的選擇器。4. 禁止在css中使用*選擇符。5. 除非必須，否則，一般有class或id的，不需要再寫上元素對應的tag。6. 0后面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px。7. 如果是16進制表示顏色，則顏色取值應該大寫。8. 如果可以，顏色盡量用三位字符表示，例如#AABBCC寫成#ABC。9. 如果沒有邊框時，不要寫成border:0，應該寫成border:none。10. 盡量避免使用AlphaImageLoader。11. 在保持代碼解耦的前提下，盡量合并重復的樣式。12. background、font等可以縮寫的屬性，盡量使用縮寫形式。5、CSSHack的使用請不用動不動就使用瀏覽器檢測和CSSHacks，先試試別的解決方法吧！考慮到代碼高效率和易管理，雖然這兩種方法能快速解決瀏覽器解析差異，但應被視為最后的手段。在長期的項目中，允許使用hack只會帶來更多的hack，你越是使用它，你越是會依賴它！推薦使用下面的：6、字體規則 為了防止文件合并及編碼轉換時造成問題，建議將樣式中文字體名字改成對應的英文名字，如：黑體(SimHei)宋體(SimSun)微軟雅黑(MicrosoftYahei，幾個單詞中間有空格組成的必須加引號) 字體粗細采用具體數值，粗體bold寫為700，正常normal寫為400 font-size必須以px或pt為單位，推薦用px（注：pt為打印版字體大小設置），不允許使用xx-small/x-small/small/medium/large/x-large/xx-large等值 為了對font-family取值進行統一，更好的支持各個操作系統上各個瀏覽器的兼容性，font-family不允許在業務代碼中隨意設置五、其他規范 不要輕易改動全站級CSS和通用CSS庫。改動后，要經過全面測試。 避免使用filter 避免在CSS中使用expression 避免過小的背景圖片平鋪。 盡量不要在CSS中使用!important 絕對不要在CSS中使用”*”選擇符 層級(z-index)必須清晰明確，頁面彈窗、氣泡為最高級（最高級為999），不同彈窗氣泡之間可在三位數之間調整；普通區塊為10-90內10的倍數；區塊展開、彈出為當前父層級上個位增加，禁止層級間盲目攀比。 背景圖片請盡可能使用sprite技術,減小http請求,考慮到多人協作開發,sprite按照模塊、業務、頁面來劃分均