css書寫規範

標籤：current   reg   index   英文   屬性   標籤   column   閱讀   login   

 

一、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書寫規範

   1.使用CSS縮寫屬性 
　　CSS有些屬性是可以縮寫的，
　　比如padding,margin,font等等，這樣精簡代碼同時又能提高使用者的閱讀體驗。

   2.去掉小數點前的“0”

   3.簡寫命名
　　很多使用者都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！

   4.16進位顏色代碼縮寫
　　有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高使用者體驗為主。

   5.連字號CSS選取器命名規範
　　1）.長名稱或片語可以使用中橫線來為選取器命名。
　　2）.不建議使用“_”底線來命名CSS選取器，為什麼呢？
　　　　輸入的時候少按一個shift鍵； 瀏覽器安全色問題 
　　   （比如使用_tips的選取器命名，在IE6是無效的） 能良好區分JavaScript變數命名（JS變數命名是用“_”）

   6.不要隨意使用id
　　id在JS是唯一的，不能多次使用，而使用class類別選取器卻可以重複使用，
　　另外id的優先順序優先與class，所以id應該按需使用，而不能濫用。

  7.為選取器添加狀態首碼
　　有時候可以給選取器添加一個表示狀態的首碼，讓語義更明了，類如“.is-”首碼。

三、CSS命名規範（規則）

  常用的CSS命名規則
　　頭：header 
　　內容：content/container 
　　尾：footer 
　　導航：nav 
　　側欄：sidebar 
　　欄目：column 
　　頁面外圍控制整體佈局寬度：wrapper 
　　左右中：left right center 
　　登入條：loginbar 
　　標誌：logo 
　　廣告：banner 
　　頁面主體：main 
　　熱點：hot 
　　新聞：news 
　　下載：download 
　　子導航：subnav 
　　菜單：menu 
　　子功能表：submenu 
　　搜尋：search 
　　友情連結：friendlink 
　　頁尾：footer 
　　著作權：copyright 
　　滾動：scroll 
　　內容：content 
　　標籤：tags 
　　文章列表：list 
　　提示資訊：msg 
　　小技巧：tips 
　　欄目標題：title 
　　加入：joinus 
　　指南：guide 
　　服務：service 
　　註冊：regsiter 
　　狀態：status 
　　投票：vote 
　　夥伴：partner
　　注釋的寫法:
　　/* Header */ 
　　內容區 
　　/* End Header */
id的命名:
  (1)頁面結構
　　容器: container 
　　頁頭：header 
　　內容：content/container 
　　頁面主體：main 
　　頁尾：footer 
　　導航：nav 
　　側欄：sidebar 
　　欄目：column 
　　頁面外圍控制整體佈局寬度：wrapper 
　　左右中：left right center
 (2)導航
　　導航：nav 
　　主導航：mainnav 
　　子導航：subnav 
　　頂導航：topnav 
　　邊導航：sidebar 
　　左導航：leftsidebar 
　　右導航：rightsidebar 
　　菜單：menu 
　　子功能表：submenu 
　　標題: title 
　　摘要: summary
 (3)功能
　　標誌：logo 
　　廣告：banner 
　　登陸：login 
　　登入條：loginbar 
　　註冊：register 
　　搜尋：search 
　　功能區：shop 
　　標題：title 
　　加入：joinus 
　　狀態：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.css 
　　布局、版面 layout.css 
　　主題 themes.css 
　　專欄 columns.css 
　　文字 font.css 
　　表單 forms.css 
　　補丁 mend.css 
　　列印 print.css

css書寫規範