網頁設計命名規範
阿新 • • 發佈：2019-01-03
三.Photoshop圖層結構規範:
Photoshop圖層命名遵循樹形結構，凡某元素組成的圖層大於3層，即可形成組，所有圖層儘量避免使用預設命名(圖層+編號)。
圖層命名結構
四．常用命名彙總:
站點：site
首頁：homepage
當前位置：currentPath
二級頁面/子頁面：subpage
佈局：layout
搜尋：search
網頁頭部：head/header
登入條:loginbar
標誌:logo
側欄：side/sidebar
廣告條:banner
導航:nav
主 導 航：mainNav
頂 導 航：topNav
子導航:subNav
當前位置導航：crumb
選單:menu
子選單:subMenu
選單內容：menuContent
子選單內容：subMenuContent
下拉：drop
下拉選單:dropMenu
工具條：tool/toolbar
表單:form
欄目:column
箭頭：arr/arrow
搜尋:search
搜尋按鈕:btn-search
滾動條:scroll
主題/外觀：theme
頁面主體：main
頁面中部：mainBody
內容:content
標籤頁:tab
文章列表:list
標籤內容：tagContent
當前標籤：tagCurrent/currentTag
提示資訊:msg
轉角/圓角：cor/corner
特別的：spec
資源：source
加入：joinus
小技巧:tips
欄目標題:title
連結:links
頁尾:footer
服務:service
指南：guild
熱點:hot
新聞:news
下載:download
註冊:regsiter
狀態:status
按鈕:btn
注 釋：note
投票:vote
合作伙伴:partner
友情連結：friendlink
關於我們：aboutus
提交:submit
搜尋框：searchbox
文字框:textbox
網頁底部：foot/footer
版權:copyright
網站地圖: sitemap
列 定 義：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)
分類命名
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 { }
注意事項:
1.一律小寫;
2.儘量用英文;
3.不加中槓和下劃線;
4.儘量不縮寫，除非一看就明白的單詞.
主要的 master.css 模組 module.css 基本共用 base.css
佈局，版面 layout.css 主題 themes.css 專欄 columns.css
文字 font.css 表單 forms.css 補丁 mend.css 列印 print.css
統計:count
以上結構就可以組合使用，例如：左列標題lefttitle；底部導航footernav 規範不是說要所有人照一個樣子來命名css，我們可以根據自己的需要定製命名規則，只要記住命名的規則，就可以根據網站本身的特點來創造具有自己風格的命名方式。
一、目前網頁設計者用得較多的是基於軟體開中變數的命名方式的命名方法。如對於一組用於定義字型樣式的class，我們可以使用f即foot的頭字母為字首進行命名，如：
f-blue:表示藍色字型樣式
f-blod:表示粗體字型樣式
對於網頁中如新聞頻道的一些新聞的現實樣式，可以用n作為字首進行樣式設計，如：
n-title:新聞標題
n-list:新聞列表
五、CSS檔案及樣式命名
1、CSS檔案命名規範
全域性樣式：global.css；
框架佈局：layout.css；
字型樣式：font.css；
連結樣式：link.css；
列印樣式：print.css；
2、CSS樣式命名規範
本人建議：用字母、_號工、-號、數字組成，必須以字母開頭，不能為純數字。為了開發後樣式名管理方便，大家請用有意義的單詞或縮寫組合來命名，讓同事一看就明白這樣式大概是哪一塊的，這樣就節省了查詢樣式的時間，例如：
頭部樣式用header，頭部左邊，可以用header_left或header_l,還有如果是列結構的可以這樣——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一舉例了，大家按以上規律去命名就好。
下面列出一些常用的命名單詞方便大家使用：（以後大家工作過程中慢慢把自己積累的單詞都共享出來，那大家的命就會更加統一了，就不會有一義多詞的情況了。）
Photoshop圖層命名遵循樹形結構，凡某元素組成的圖層大於3層，即可形成組，所有圖層儘量避免使用預設命名(圖層+編號)。
圖層命名結構
四．常用命名彙總:
站點：site
首頁：homepage
當前位置：currentPath
二級頁面/子頁面：subpage
佈局：layout
搜尋：search
網頁頭部：head/header
登入條:loginbar
標誌:logo
側欄：side/sidebar
廣告條:banner
導航:nav
主 導 航：mainNav
頂 導 航：topNav
子導航:subNav
當前位置導航：crumb
選單:menu
子選單:subMenu
選單內容：menuContent
子選單內容：subMenuContent
下拉：drop
下拉選單:dropMenu
工具條：tool/toolbar
表單:form
欄目:column
箭頭：arr/arrow
搜尋:search
搜尋按鈕:btn-search
滾動條:scroll
主題/外觀：theme
頁面主體：main
頁面中部：mainBody
內容:content
標籤頁:tab
文章列表:list
標籤內容：tagContent
當前標籤：tagCurrent/currentTag
提示資訊:msg
轉角/圓角：cor/corner
特別的：spec
資源：source
加入：joinus
小技巧:tips
欄目標題:title
連結:links
頁尾:footer
服務:service
指南：guild
熱點:hot
新聞:news
下載:download
註冊:regsiter
狀態:status
按鈕:btn
注 釋：note
投票:vote
合作伙伴:partner
友情連結：friendlink
關於我們：aboutus
提交:submit
搜尋框：searchbox
文字框:textbox
網頁底部：foot/footer
版權:copyright
網站地圖: sitemap
列 定 義：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)
分類命名
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 { }
注意事項:
1.一律小寫;
2.儘量用英文;
3.不加中槓和下劃線;
4.儘量不縮寫，除非一看就明白的單詞.
主要的 master.css 模組 module.css 基本共用 base.css
佈局，版面 layout.css 主題 themes.css 專欄 columns.css
文字 font.css 表單 forms.css 補丁 mend.css 列印 print.css
統計:count
以上結構就可以組合使用，例如：左列標題lefttitle；底部導航footernav 規範不是說要所有人照一個樣子來命名css，我們可以根據自己的需要定製命名規則，只要記住命名的規則，就可以根據網站本身的特點來創造具有自己風格的命名方式。
一、目前網頁設計者用得較多的是基於軟體開中變數的命名方式的命名方法。如對於一組用於定義字型樣式的class，我們可以使用f即foot的頭字母為字首進行命名，如：
f-blue:表示藍色字型樣式
f-blod:表示粗體字型樣式
對於網頁中如新聞頻道的一些新聞的現實樣式，可以用n作為字首進行樣式設計，如：
n-title:新聞標題
n-list:新聞列表
五、CSS檔案及樣式命名
1、CSS檔案命名規範
全域性樣式：global.css；
框架佈局：layout.css；
字型樣式：font.css；
連結樣式：link.css；
列印樣式：print.css；
2、CSS樣式命名規範
本人建議：用字母、_號工、-號、數字組成，必須以字母開頭，不能為純數字。為了開發後樣式名管理方便，大家請用有意義的單詞或縮寫組合來命名，讓同事一看就明白這樣式大概是哪一塊的，這樣就節省了查詢樣式的時間，例如：
頭部樣式用header，頭部左邊，可以用header_left或header_l,還有如果是列結構的可以這樣——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一舉例了，大家按以上規律去命名就好。
下面列出一些常用的命名單詞方便大家使用：（以後大家工作過程中慢慢把自己積累的單詞都共享出來，那大家的命就會更加統一了，就不會有一義多詞的情況了。）