前端設計開發常用命名規則
網頁設計命名規範
- Container
“container“ 就是將頁面中的所有元素包在一起的部分，這部分還可以命名為:“wrapper“, “wrap“, “page“.
- Header
“header” 是網站頁面的頭部區域，一般來講，它包含網站的logo和一些其他元素。這部分還可以命名為:“page-header” (或
pageHeader).
- Navbar
“navbar“等同於橫向的導航欄，是最典型的網頁元素。這部分還可以命名為:“nav”, “navigation”,
“nav-wrapper”.
- Menu
“Menu”區域包含一般的連結和選單，這部分還可以命名為: “subNav “, “links“，“sidebar-main”.
- Main
“Main”是網站的主要區域，如果是部落格的話它將包含的日誌。這部分還可以命名為: “content“, “main-content”
(或“mainContent”)。
- Sidebar
“Sidebar” 部分可以包含網站的次要內容，比如最近更新內容列表、關於網站的介紹或廣告元素等…這部分還可以命名為: “subNav “,
“side-panel“, “secondary-content“.
- 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
Photoshop圖層結構規範
Photoshop圖層命名遵循樹形結構，凡某元素組成的圖層大於3層，即可形成組，所有圖層儘量避免使用預設命名(圖層+編號)。
圖層命名結構
第一級圖層結構如下圖:
第二級圖層結構如下圖:
第三級圖層結構如下圖:
常用命名彙總
站頭部: head/header(頭部) top（頂部)
導航：nav
導航具體區分：topnav(頂部導航)、mainnav(主導航)、mininav(迷你導航)、textnav(導航文字)、subnav(子導航/二級導航)旗幟、廣告和商標：logo（旗幟）、brand(商標)、banner(標語)
搜尋：sreach(搜尋)、sreachbox(搜尋框)、sreachbtn(搜尋按鈕)、sreachinput（搜尋輸入框）
註冊和登入：login(登入)、regsiter(註冊)、userbox(使用者名稱/通行證的文字框)、password(密碼)
佈局、分欄和框：layout(佈局)、bigdiv(大div)、leftdiv(左分欄)、rightdiv(右分欄)、leftfloat(左浮動)、rightfloat(右浮動)、mainbox()、subpage(子頁面/二級頁面)
頁尾/底部：foot/footer(頁尾/底部)、copyright(版權資訊)、sitemap(網站地圖)
其他：content(內容)、skin(面板)、title(標題)、from(表單)、pic(圖片)、news(新聞)、shop(購物區)、list(列表/清單)、newslist(新聞列表)、
downloadlist(下載列表)、piclist(圖片列表)、dropmenv(下拉選單)、cor/corner(圓角)、homepage(首頁)、crumb(當前位置導航)
分類命名
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.css
以上結構就可以組合使用，例如：左列標題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 (三列中的第三列)，其它的我就不一一舉例了，大家按以上規律去命名就好。
下面列出一些常用的命名單詞方便大家使用：（以後大家工作過程中慢慢把自己積累的單詞都共享出來，那大家的命就會更加統一了，就不會有一義多詞的情況了。）