css書寫規(guī)范及順序

1、CSS書寫規(guī)范及順序CSS書寫順序1.位置屬性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等)使用CSS縮寫屬性CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。去掉小數點前的”0簡寫命

2、名很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！16進制顏色代碼縮寫有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。連字符CSS選擇器命名規(guī)范1.長名稱或詞組可以使用中橫線來為選擇器命名。2.不建議使用”_”下劃線來命名CSS選擇器，為什么呢？輸入的時候少按一個shift鍵；瀏覽器兼容問題 （比如使用_tips的選擇器命名，在IE6是無效的）能良好區(qū)分JavaScript變量命名（JS變量命名是用”_”）這里有一篇破折號與下劃線的詳細討論，英文：點擊查看 中文篇：點擊查看不要隨意使用idid在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復

3、使用，另外id的優(yōu)先級優(yōu)先與class，所以id應該按需使用，而不能濫用。為選擇器添加狀態(tài)前綴有時候可以給選擇器添加一個表示狀態(tài)的前綴，讓語義更明了，比如下圖是添加了”.is-”前綴。CSS命名規(guī)范（規(guī)則）常用的CSS命名規(guī)則頭：header內容：content/container尾：footer導航：nav側欄：sidebar欄目：column頁面外圍控制整體佈局寬度：wrapper左右中：left right center登錄條：loginbar標志：logo廣告：banner頁面主體：main熱點：hot新聞：news下載：download子導航：subnav菜單：menu子菜單：sub

4、menu搜索：search友情鏈接：friendlink頁腳：footer版權：copyright滾動：scroll內容：content標簽：tags文章列表：list提示信息：msg小技巧：tips欄目標題：title加入：joinus指南：guide服務：service注冊：regsiter狀態(tài)：status投票：vote合作伙伴：partner注釋的寫法:/* Header */內容區(qū)/* End Header */id的命名:1)頁面結構容器: container頁頭：header內容：content/container頁面主體：main頁尾：footer導航：nav側欄：sideba

5、r欄目：column頁面外圍控制整體佈局寬度：wrapper左右中：left right center(2)導航導航：nav主導航：mainnav子導航：subnav頂導航：topnav邊導航：sidebar左導航：leftsidebar右導航：rightsidebar菜單：menu子菜單：submenu標題: title摘要: summary(3)功能標志：logo廣告：banner登陸：login登錄條：loginbar注冊：register搜索：search功能區(qū)：shop標題：title加入：joinus狀態(tài)：status按鈕：btn滾動：scroll標籤頁：tab文章列表：list提示信息：msg當前的: current小技巧：tips圖標: icon注釋：note指南：guild服務：service熱點：hot新聞：news下載：download投票：vote合作伙伴：partner友情鏈接：link版權：copyright注意事項:1.一律小寫;2.盡量用英文;3.不加中槓和下劃線;4.盡量不縮寫，除非一看就明白的單詞。CSS樣式表文件命名主要的 master.css模塊 module.css基本共用 base.cs