CSS命名規(guī)則：

(一)網(wǎng)頁設計中常用的CSS命名規(guī)則：

• 頭：header
• 內(nèi)容：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
• 內(nèi)容：content
• 標簽頁：tab
• 文章列表：list
• 提示信息：msg
• 小技巧：tips
• 欄目標題：title
• 加入：joinus
• 指南：guild
• 服務：service
• 注冊：regsiter
• 狀態(tài)：status
• 投票：vote
• 合作伙伴：partner
• 遮罩 : mask
• 下劃線高亮 : under-line
• 常見的,初始化: common

(二)id的命名:

(1)頁面結構

•    容器: container
  

•    頁頭：header
  

•    內(nèi)容：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
  

•    功能區(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
  

•    項目 item
  

(三)class的命名:

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

? 如:

? red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

       .font12px { font-size: 12px; }
       .font9pt {font-size: 9pt; }

(3)標題欄樣式,使用"類別+功能"的方式命名

(2)標題欄樣式,使用"類別+功能"的方式命名

? 如:

        .barnews { }
        .barproduct { }

(四)變量的命名

• 增刪查改 : CRUD
• 可變,對象 : params
• 關閉 : close
• 圖解,圖文: graphic
• 拖曳 : drag
• 通用: currency
• 地址: address
• 照片: picture

注意事項:

•    1.一律小寫;
  

•    2.盡量用英文;
  

•    3.不加中杠和下劃線;
  

•    4.盡量不縮寫，除非一看就明白的單詞.
  

•    主要的 master.css
  

•    模塊 module.css
  

•    基本共用 base.css
  

•    布局，版面 layout.css
  

•    主題 themes.css
  

•    專欄 columns.css
  

•    文字 font.css
  

•    表單 forms.css
  

•    補丁 mend.css
  

•    打印 print.css
  

•    css初始化代碼 common.css