網頁設計命名規範

百度找的資料：

網頁設計命名規範

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

網頁設計命名規範
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

 

三.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，咱們能夠根據本身的須要定製命名規則，只要記住命名的規則，就能夠根據網站自己的特色來創造具備本身風格的命名方式。
1、目前網頁設計者用得較多的是基於軟件開中變量的命名方式的命名方法。如對於一組用於定義字體樣式的class，咱們可使用f即foot的頭字母爲前綴進行命名，如：
f-blue:表示藍色字體樣式
f-blod:表示粗體字體樣式
對於網頁中如新聞頻道的一些新聞的現實樣式，能夠用n做爲前綴進行樣式設計，如：
n-title:新聞標題
n-list:新聞列表
 
 
5、CSS文件及樣式命名
一、CSS文件命名規範
全局樣式：global.css；
框架佈局：layout.css；
字體樣式：font.css；
連接樣式：link.css；
打印樣式：print.css；
二、CSS樣式命名規範
本人建議：用字母、_號工、-號、數字組成，必須以字母開頭，不能爲純數字。爲了開發後樣式名管理方便，你們請用有意義的單詞或縮寫組合來命名，讓同事一看就明白這樣式大概是哪一塊的，這樣就節省了查找樣式的時間，例如：
頭部樣式用header，頭部左邊，能夠用header_left或header_l,還有若是是列結構的能夠這樣——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一舉例了，你們按以上規律去命名就好。
下面列出一些經常使用的命名單詞方便你們使用：（之後你們工做過程當中慢慢把本身積累的單詞都共享出來，那你們的命就會更加統一了，就不會有一義多詞的狀況了。）