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

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

 

1.    Container
「container「 是將頁面中的所有元素包在一起的部分，這部分還可以命名為: “wrapper", “wrap”“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
登入條：登入

頁頭: sidebar
廣告條:banner
導航:nav
子導覽:subNav
選單:menu
子選單:subMenu
下拉選單:dropMenu
工具列: toolbar
表單search:form
欄：cox
搜尋按鈕:btn-search
滾動條:scroll
內容:content
標籤頁:tab
文章列表:list
提示訊息:msg
小技巧:tips
欄目標題:title
連結:links
小技巧:tips
欄目標題:title
連結:links
小技巧: 尺寸
服務:service
熱點:hot
新聞:news
下載:download
註冊:regsiter
狀態:status
按鈕:btn
投票:vote
合作地圖:partnercom其他參考的命名規則
頁頭：header 

登入條：loginbar 

標誌：logo 

側邊欄：sidebar 

廣告：banner 
導航：nav 🠎
滾動：scroll 
頁面主體：main 
內容：content 
標籤頁：tab 
文章清單：list 
提示訊息：msg 
小技巧：tips 
欄目標題：title  服務指南：title 
熱點：hot 
新聞：news 
下載：download 
註冊：regsiter 
狀態：status 
按鈕：btn 
投票：vote foot


CSS ID 的命名
外套：　　wrap 
主導覽：　　mainnav 
子導覽：　　subnav 
頁腳：　　footer 〠 整個頁：　contentcontent頁腳：腳〵遀造
商標：　　label 
標題：　　title 
主導覽： mainbav（globalnav） 
頂導覽：　　topnav 
邊導覽：　　sidebar 
左導覽：　　leftsidebar 
旗幟內容1： menu1content 
選單容量：　menucontainer 
子選單：　　submenu 

邊導航圖示：sidebarIcon 

註記：　　　note 
麵包屑：　　breadcrumb(即頁面所處位置導航提示） 
容器：　〔　container〠 登陸『　　　Login 
功能區：　　shop(如購物車，收銀台) 
當前的current

另外在編輯樣式表時可用的註解可這樣寫：
 
內容區 

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

實例：
為相同關鍵字開發，特約.頭部：header
主導航：mainNav
子導航：subNav
頂導航：topNav
網站標誌：logo
大廣告：banner
頁面中部：mainBody
底部：footer
菜單：menu ：subMenu
子選單內容：subMenuContent
搜尋：search
搜尋關鍵字：keyword
搜尋範圍：range
標籤文字：tagTitle
標籤內容：tagContent
目前標籤：tagCurrent/currentTagg標題：列表標題：titlecontent ：list
目前位置：currentPath
側邊欄：sidebar
圖示：icon
註解：note
登入：login
註冊：register
欄定義：column_1of3 (三列的第一列)
column_2of3 (三列中的第一列)
column_2of3 (三列中的第一列)
column_2of3 (三列中的第一列)
column_2of3 (三列中的第一列)第二列)
column_3of3 (三列)