css怎樣命名比較規範

每次咱們作網頁時候很糾結怎樣取名字，實在想不出好的名字，不少人就會用a、b、或者aa、bb等來命名，這樣的命名其實當本身把網頁完成後，要修改那一部分時，會發現要花費很大的功夫去尋找，讓人很傷腦筋，特別是與後臺對接數據時，其餘程序員徹底一頭霧水不說，還被你的不規範代碼搞得頭昏腦漲，苦不堪言，於是，咱們要嚴謹命名，規範命名。

命名時須要注意的點：

• 規則命名中，一概採用小寫加中劃線的方式，不容許使用大寫字母或 _；

• 命名避免使用中文拼音，應該採用更簡明有語義的英文單詞進行組合；

• 命名注意縮寫，可是不能盲目縮寫，具體請參見經常使用的CSS命名規則；

• 不容許經過一、二、3等序號進行命名；

• 避免class與id重名；

• id用於標識模塊或頁面的某一個父容器區域，名稱必須惟一，不要隨意新建id；

• class用於標識某一個類型的對象，命名必須言簡意賅；

• 儘量提升代碼模塊的複用，樣式儘可能用組合的方式；

• 規則名稱中不該該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的信息。應該用意義命名，而不是樣式顯示結果命名。
  

一、經常使用id的命名：

(1)頁面結構

• 容器: container

• 頁頭：header

• 內容：content/container

• 頁面主體：main

• 頁尾：footer

• 導航：nav

• 側欄：sidebar

• 欄目：column

• 頁面外圍控制總體佈局寬度：wrapper

• 左右中：left right center
  

(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

• 版權：copyright
  

二、經常使用class的命名：

(1)顏色:使用顏色的名稱或者16進制代碼,如

• .red { color: red; }

• .f60 { color: #f60; }

• .ff8600 { color: #ff8600; }
  

(2)字體大小,直接使用」font+字體大小」做爲名稱,如

• .font12px { font-size: 12px; }

• .font9pt {font-size: 9pt; }
  

(3)對齊樣式,使用對齊目標的英文名稱,如

• .left { float:left; }

• .bottom { float:bottom; }
  

(4)標題欄樣式,使用」類別+功能」的方式命名,如

• .barnews { }

• .barproduct { }