css命名規則 網站設計及基本架構結構

一.網站設計及基本架構結構:

1. Container
“container“ 就是將頁面中的所有元素包在一起的部分，這部分還可以命名為: “wrapper“, “wrap“, “page“.
2. Header
“header” 是網站頁面的頭部地區，一般來講，它包含網站的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).
3. Navbar
“navbar“等同於橫向的導覽列，是最典型的網頁元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.
4. Menu
“Menu”地區包含一般的連結和菜單，這部分還可以命名為: “subNav “, “links“，“sidebar-main”.
5. Main
“Main”是網站的主要區域，如果是部落格的話它將包含的日誌。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。
6. Sidebar
“Sidebar” 部分可以包含網站的次要內容，比如最新動向內容列表、關於網站的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.
7. Footer
“Footer”包含網站的一些附加資訊，這部分還可以命名為: “copyright“。

二.需要注意的幾點:

1.盡量考慮為元素命名其本身的作用或”用意”，達到語義化。不要使用表面形式的命名.
如:red/left/big等。

2.組合命名規則:
[元素類型]-[元素作用/內容]
如:搜尋按鈕: btn-search
登入表單:form-login
新聞列表:list-news

3.涉及到互動行為的元素命名:
凡涉及互動行為的元素通常會有正常、懸停、點擊和已瀏覽等不同樣式，命名可參考以下規則:
滑鼠移至上方:：hover 點擊：click 已瀏覽：visited
如:搜尋按鈕: btn-search、btn-search-hover、btn-search-visited

三、常用命名匯總:

頁頭:header
登入條:loginbar
標誌:logo
側欄:sidebar
廣告條:banner
導航:nav
子導航:subNav
菜單:menu
子功能表:subMenu
下拉式功能表:dropMenu
工具條: toolbar
表單:form
欄目:column
箭頭:arrow
搜尋:search
搜尋按鈕:btn-search
捲軸:scroll
內容:content
標籤頁:tab
文章列表:list
提示資訊:msg
小技巧:tips
欄目標題:title
連結:links
頁尾:footer
服務:service
熱點:hot
新聞:news
下載:download
註冊:regsiter
狀態:status
按鈕:btn
投票:vote
夥伴:partner
著作權:copyright
網站地圖: sitemap

其他參考的命名規則
頁頭：header
登入條：loginbar
標誌：logo
側欄：sidebar
廣告：banner
導航：nav
子導航：subnav
菜單：menu
子功能表：submenu
搜尋：search
滾動：scroll
頁面主體：main
內容：content
標籤頁：tab
文章列表：list
提示資訊：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
註冊：regsiter
狀態：status
按鈕：btn
投票：vote
夥伴：partner
友情連結：friendlink
頁尾：footer
著作權：copyright

CSS ID 的命名
外　套：　　wrap
主導航：　　mainnav
子導航：　　subnav
頁　腳：　　footer
整個頁面：　content
頁　眉：　　header
頁　腳：　　footer
商　標：　　label
標　題：　　title
主導航：　　mainbav（globalnav）
頂導航：　　topnav
邊導航：　　sidebar
左導航：　　leftsidebar
右導航：　　rightsidebar
旗　志：　　logo
標　語：　　banner
菜單內容1： menu1content
菜單容量：　menucontainer
子功能表：　　submenu
邊互動中心圖示：sidebarIcon
注釋：　　　note
麵包屑：　　breadcrumb(即頁面所處位置導航提示）
容器：　　　container
內容：　　　content
搜尋：　　　search
登陸：　　　Login
功能區：　　shop(如購物車，收銀台)
當前的　　　current

另外在編輯樣式表時可用的注釋可這樣寫：
<-- Footer -->
內容區
<-- End Footer -->

樣式檔案命名
主要的 master.css
布局，版面 layout.css
專欄 columns.css
文字 font.css
列印樣式 print.css
主題 themes.css

執行個體：
為同一開發，特設定CSS命名關鍵字如下：

容 器：container/box
頭 部：header
主 導 航：mainNav
子 導 航：subNav
頂 導 航：topNav
網站標誌：logo
大 廣 告：banner
頁面中部：mainBody
底 部：footer
菜 單：menu
菜單內容：menuContent
子 菜 單：subMenu
子功能表內容：subMenuContent
搜 索：search
搜尋索引鍵：keyword
搜尋範圍：range
標籤文字：tagTitle
標籤內容：tagContent
當前標籤：tagCurrent/currentTag
標　 題：title
內 容：content
列 表：list
當前位置：currentPath
側 邊 欄：sidebar
圖 標：icon
注 釋：note
登 錄：login
注 冊：register
列 定 義：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)

