CSS命名規則

CSS命名規則
　　頭：header
　　內容：content/containe
　　尾：footer
　　導航：nav
　　側欄：sidebar
　　欄目：column
　　頁面外圍控制整體佈局寬度：wrapper
　　左右中：left right center
　　登入條：loginbar
　　標誌：logo
　　廣告：banner
　　頁面主體：main
　　熱點：hot
　　新聞：news
　　下載：download
　　子導航：subnav
　　選單：menu
　　子選單：submenu
　　搜尋：search
　　友情連結：friendlink
　　頁尾：footer
　　版權：copyright
　　滾動：scroll
　　內容：content
　　標籤頁：tab
　　文章列表：list
　　提示資訊：msg
　　小技巧：tips
　　欄目標題：title
　　加入：joinus
　　指南：guild
　　服務：service
　　註冊：regsiter
　　狀態：status
　　投票：vote
　　合作伙伴：partner

XHTML檔案中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

做網頁時，常會因為不會命名和命名重複而造成好多不不必要的麻煩，正確的命名的確很重要。
1.CSS ID 的命名
外　套：　　wrap
主導航：　　mainnav
子導航：　　subnav
頁　腳：　　footet
整個頁面：　content
頁　眉：　　header
頁　腳：　　footer
商　標：　　label
標　題：　　title
主導航：　　nav（mainnav/globalnav）
頂導航：　　topnav
邊導航：　　sidebar
左導航：　　leftsidebar
右導航：　　rightsidebar
當前位置：　loc
旗　志：　　logo
標　語：　　banner
選單內容1： menu1 content
選單容量：　menu container
子選單：　　submenu
邊導航圖示：sidebarIcon
註釋：　　　note
麵包屑：　　breadcrumb(即頁面所處位置導航提示）
容器：　　　container
內容：　　　content
搜尋：　　　search
登陸：　　　Login
功能區：　　shop(如購物車，收銀臺)
當前的　　　current
網站公用相關
Container div #container 容器
Header or banner div #header 頁頭部分
Main or global navigation div #main-nav 主導航
Menu #menu 選單
Sub Menu #submenu 子選單
Left or right side columns #sidebar-a, #sidebar-b 左邊欄或右邊欄
Main div #main 頁面主體
Content div #content 內容部分
The main content area #content-main 主要內容區域
Footer div #footer 頁尾部分
Tag #tag 標籤
Message #msg #message 提示資訊
Tips #tips 小技巧
Vote #vote 投票
Friend Link #friendlink 友情連線
Title #title 標題
Summary #summary 摘要
Sub-navigation list #sub-nav 二級導航
Search input #search-input 搜尋輸入框
Search output #search-output 搜尋輸出和搜尋結果相似
Search #search 搜尋
Search results #search-results 搜尋結果
Copyright information #copyright 版權資訊
brand #branding 商標
branding-logo #branding-logo LOGO
Site information #siteinfo 網站資訊
Copyright information etc. #siteinfo-legal 法律宣告
Designer or other credits #siteinfo-credits 信譽
Join us #joinus 加入我們
Partnership opportunities #partner 合作伙伴
Services #service 服務
Regsiter #regsiter 註冊
Status #status 狀態
電子貿易相關
Products .products 產品
Products prices .products-prices 產品價格
Products description .products-description 產品描述
Products review .products-review 產品評論
Editor's review .editor-review 編輯評論
New release .news-release 最新產品
Publisher .publisher 生產商
Screen shot .screenshot 縮圖
FAQ .faqs 常見問題
Keyword .keyword 關鍵詞
Blog .blog 部落格
Forum .forum 論壇
2.另外在編輯樣式表時可用的註釋可這樣寫：
內容區
3.樣式檔案命名
主要的 master.css
佈局，版面 layout.css
專欄 columns.css
文字 font.css
列印樣式 print.css

[@more@]