各類命名規範，打好基礎才能建設高樓

CSS命名規則

　　頭：header

　　內容：content/containe

　　尾：footer

　　導航：nav

　　側欄：sidebar

　　欄目：column

　　頁面外圍控制總體佈局寬度：wrapper

　　左右中：left right center

　　登陸條：loginbar

　　標誌：logo

　　廣告：banner

　　頁面主體：main

　　熱點：hot

　　新聞：news

　　下載：download

　　子導航：subnav

　　菜單：menu

　　子菜單：submenu

　　搜索：search

　　友情連接：friendlink

　　頁腳：footer

　　版權：copyright

　　滾動：scroll

　　內容：content

　　標籤頁：tab

　　文章列表：list

　　提示信息：msg

　　小技巧：tips

　　欄目標題：title

　　加入：joinus

　　指南：guild

　　服務：service

　　註冊：regsiter

　　狀態：status

　　投票：vote

　　合做夥伴：partner

XHTML文件中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

 

 

 

 

CSS+DIV的命名規則：

　　登陸條:loginBar
　　標誌:logo
　　側欄:sideBar
　　廣告:banner
　　導航:nav
　　子導航:subNav
　　菜單:menu
　　子菜單:subMenu
　　搜索:search
　　滾動:scroll
　　頁面主體:main
　　內容:content
　　標籤頁:tab
　　文章列表:list
　　提示信息:msg
　　小技巧:tips
　　欄目標題:title
　　友情連接:friendLink
　　頁腳:footer
　　加入:joinus
　　指南:guild
　　服務:service
　　熱點:hot
　　新聞:news
　　下載:download
　　註冊:regsiter
　　狀態:status
　　按鈕:btn
　　投票:vote
　　合做夥伴:partner
　　版權:copyRight

　　1.CSSID的命名
　　外套:wrap
　　主導航:mainNav
　　子導航:subnav
　　頁腳:footer
　　整個頁面:content
　　頁眉:header
　　頁腳:footer
　　商標:label
　　標題:title
　　主導航:mainNav(globalNav)
　　頂導航:topnav
　　邊導航:sidebar
　　左導航:leftsideBar
　　右導航:rightsideBar
　　旗志:logo
　　標語:banner
　　菜單內容1:menu1Content
　　菜單容量:menuContainer
　　子菜單:submenu
　　邊導航圖標:sidebarIcon
　　註釋:note
　　麪包屑:breadCrumb(即頁面所處位置導航提示)
　　容器:container
　　內容:content
　　搜索:search
　　登錄:login
　　功能區:shop(如購物車，收銀臺)
　　當前的current

　　2.樣式文件命名
　　主要的:master.css
　　佈局版面:layout.css
　　專欄:columns.css
　　文字:font.css
　　打印樣式:print.css
　　主題:themes.css

說明：均爲class，須要擴展，則在當前命名內以「_「(下劃線)後綴自定名稱。
我習慣稱列表頁爲list，新聞列表則爲newslist，圖片列表爲piclist，
內容頁爲view，
/**/
總體大框架：#wrapper
大框架內：#inwrapper
/////////////////////////////////////////////////////////////////////////////////////////////////////////
頂部及banner：.top
頂部及banner內：.intop
Logo：.logo
Banner：.banner
導航：.menu
導航內：.inmenu
        .Menuul
        .Menuul li
        .Menuul li a
下拉菜單：.inmenu_xiala
          .Inmenu_xialaul
          .Inmenu_xialaul li
          .Inmenu_xialaul li a
///////////////////////////////////////////////////////////////////////////////////////////////////////////
主體內容：.mainWrapper
主體內容內：.inmainwrapper
左側攔：.sideleft
左側內：.insideleft
右側欄：.sideright
右側內：.insideright
中間：.sidecenter
中間內：.insidecenter
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
底部：.foot
底部內：.infoot
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*其餘命名*/
搜索：.search
搜索內：.insearch
搜索條：.searchselect
搜索按鈕：.serachbuttom
輸入文本框：.input
.select

/*表格樣式*/
表格總體框架：.listbox
表格的寬度：.listbox-table
表格頭部文字樣式：.listbox-header
表格正文文字樣式：.listbox-entry
/*通用型*/
通用：.GM/*這個有點鬱悶,英文太差...*/
通用內：.INGM
通用左浮動：.GMfl(GM FLOAT LEFT)
通用右浮動：.GMfr(GM FLOAT RIGHT)
/*通用圖片樣式*/
通用圖片樣式：.img
/*清除浮動*/
清除全部浮動：.clear
清除左側浮動：.clearleft
清除右側浮動：.clearright
/*文字樣式*/
文字：.font
/*新聞列表*/
新聞列表：.fontnews
/*View頁字體總樣式*/
VIEW頁字體：.fontview

商　標：　　label
標　題：　　title
主導航：　　mainbav（globalnav）
頂導航：　　topnav
邊導航：　　sidebar
左導航：　　leftsidebar
右導航：　　rightsidebar
旗　志：　　logo
標　語：　　banner
菜單內容1： menu1 content
菜單容量：　menu container
子菜單：　　submenu
邊導航圖標：sidebarIcon
註釋：　　　note
麪包屑：　　breadcrumb(即頁面所處位置導航提示）
容器：　　　container
內容：　　　content
搜索：　　　search
登錄：　　　Login
功能區：　　shop(如購物車，收銀臺)
當前的　　　current
報頭：　　　masthead 
摘要, 概要　 summary或general
左邊的浮動照圖片 photoleft 
右邊的浮動圖片 photoright
標題　　　title
條目底端　　　 entrybottom
更多　　　 extended或.more 
容器背景 containerbg
服務　　 service
服務連接　　 servicelink
線　　 line
文本　　 text
右邊　　 rightside
版權　　 copyright
新聞　　 news
書皮　　 wrapper
介紹　　　　　　intro-part1
專欄　　 column
路徑　　 pathways
片段　　 section
模塊　　 module
上導航　　 subnav
2.另外在編輯樣式表時可用的註釋可這樣寫：

<-- Footer -->
內容區
<-- End Footer -->

3.樣式文件命名

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

4.樣式表中的注示
實例一
/* GLOBAL --------------------------- */
/* LINKS --------------------------- */
/* FORMS --------------------------- */
/* IDS --------------------------- */
/* HEADER --------------------------- */
/* COLUMN 1 --------------------------- */
/* COLUMN 2 --------------------------- */
/* CLASSES --------------------------- */

實例二

HTML

實例三（網易）

CSS
#UrsLogin
#LogoNav
#Column
#Content1
#bNav
#Copyright
#UrsLogin
#LogoNav
#SearchArea
#ChannelArea
#HotNews
#NewsCenter
.keyword
#MallArea
#city
#aboutus

……………………
常見命名

包含 wrapper和container 
頁頭 header 或縮寫爲hd 
頁尾 footer 或縮寫爲ft 
導航 nav 
您的位置 breadcrumbs 
二級導航 sub_nav 
側欄 sidebar或side-column 
模塊 module

數據庫中的命名規則

數據庫涉及字符規則

採用26個英文字母（區分大小寫）和0 －9這十個天然數，加上下劃線_組成，共63個字符。不能出現其餘字符（註釋除外）。

數據庫對象命名規則

數據庫對象包括表、視圖（查詢）、存儲過程（參數查詢）、函數、約束。對象名字由前綴和實際名字組成，長度不超過30。前綴：使用小寫字母。

例如：表-tb 視圖-vi 存儲過程-sp 函數-fn

實際名字

實際名字儘可能描述實體的內容，由單詞或單詞組合，每一個單詞的首字母大寫，其餘字母小寫，不以數字和_開頭。

例如：表 User_Info 視圖 UserList 存儲過程 UserDelete

所以，合法的對象名字相似以下。

表 tbUser_Info、tbMessage_Detail

視圖 vi_MessageList

存儲過程 sp_MessageAdd

數據庫表命名規則

字段由前綴和實際名字組成。實際名字中首單詞一個系統儘可能採起同一單詞。

前綴：使用小寫字母tb，表示表。

例如：tbMember　　　tbMember_Info　　　tbForum_Board　　　tbForum_Thread1

字段命名規則

數字、字符、日期/時間、lob(大對象)、雜項，字段由表的簡稱、下劃線，實際名字加後綴組成。

後綴：使用小寫字母，表明該字段的屬性。

例如: 　User_Idint　　 　 User_Namestr　　 　 User_RegDatedtm

視圖命名規則

字段由前綴和實際名字組成，中間用下劃線鏈接。

前綴：使用小寫字母vi，表示視圖。

例如：vi_User　　　　vi_UserInfo

存儲過程命名規則

字段由前綴和實際名字組成，中間用下劃線鏈接。
前綴：使用小寫字母sp，表示存儲過程。
例如：sp_User

數據庫設計文檔規則

全部數據庫設計要寫成文檔，文檔以模塊化形式表達。大體格式以下：

　　'-------------------------------------------

　　'　　表名：　　tbUser_Info　　

　　'　　創建人：UAM_Richard

　　'　　日期：　　2004-12-17

　　'　　版本：　　1.0

　　'　　描述：　　保存用戶資料

　　'　　具體內容：

　　'　　UserId　　int，自動增量　　用戶代碼

　　'　　UserName　　char(12)　　用戶名字

　　'　　......

　　'--------------------------------------------
CSS類及id中的命名規則

　　Web開發人員能夠經過建立CSS類及id名稱並使用這些名稱來對div以及其餘的格式頁面元素進行標識。對開發人員來講，在命名從新定義XHTML標記（tags）的CSS selectors時，必須保證其與預約義的標記準確匹配，但就類以及id選擇器名稱而言，則仁者見仁，智者見智。然而爲所欲爲的爲這些類以及id命名則並非個好的習慣。

一、直觀命名

當在設計Web頁面以及須要對一個div進行標識的時候，最天然的想法就是使用能夠描述元素所在頁面位置的詞彙來對其命名。

例如：top-panel

　　　horizontal-nav

　　　left-side

　　　center-column

　　　right-col

這些是CSS以及XHTML類和id的有效命名方式。這些詞彙簡單而且可以令人顧名思義，所以知足了標識頁面元素以及相應的CSS樣式的須要。

但問題是這樣的名稱同頁面內容的特定表達方式相關聯。這些命名參考了某種特定頁面佈局中的頁面元素位置，所以在這樣的佈局以外使用就會顯得不合適甚至形成理解混亂。這些命名沒有涉及文檔內容的結構。所以，下面給出了對CSS類以及ID命名更好的方法。

二、結構化命名

這些是CSS以及XHTML類和id的有效命名方式。這些詞彙簡單而且可以令人顧名思義，所以知足了標識頁面元素以及相應的CSS樣式的須要。 這些是CSS以及XHTML類和id的有效命名方式。這些詞彙簡單而且可以令人顧名思義，所以知足了標識頁面元素以及相應的CSS樣式的須要。

有標記的相關信息都是用來描述文檔的結構而不是外觀。這樣的特色使得咱們能夠經過簡單的改變CSS的方式來對不一樣外觀格式下的內容（content）以及標記（markup）進行重用。當你理解這種方式時，很容易就能夠發現採用頁面位置來爲類以及id命名的方式在處理如音頻（audio）等外觀格式上顯得很是不合適。所以，應當根據在文檔中的使用目的而非出現位置來對類以及id進行結構化命名。

能夠按照以下所示的結構化方式來對類以及id名稱命名：

例如：branding

　　　main-nav

　　　subnav

　　　main-content

　　　sidebar

這些名字同直觀命名方式同樣很是易懂，但他們描述了頁面元素的做用而非位置。這使得代碼更加符合使用純粹的結構化標記（structural markup）的初衷，即開發人員能夠在不改變標記的狀況下對各類各樣媒體下的顯示格式進行處理。

即便你不打算在其餘的媒體上對Web頁面進行格式修改，使用結構化命名方式還能夠幫助你在往後的站點升級或從新設計中更爲輕鬆。例如，結構化命名避免了當一個div同id right-column移動到頁面左邊後所帶來的混亂。對div sidebar的採用這樣的命名方式就顯得更加適當，由於不管它出如今頁面的哪一邊，這個名字仍然對開發人員來講直觀易懂。

三、慣例

Andy Clarke分析了40份由推崇標準化Web設計理念的開發人員所設計的Web站點的源代碼。儘管類以及id名稱很不統一，可是仍是發現了一些頻繁出現的經常使用名稱。這裏給出了最經常使用類/id名稱的示例列表：

例如：header

　　　content

　　　nav

　　　sidebar

　　　footer

3.基於成員的命名規範
基於成員的命名規範是指按照文件,文件夾的從屬關係,經過歸類的方法進行命名,這樣可使文件的排列具備較強的邏輯性.
例如:一個圖片文件是在鼠標點擊以前爲"file_on".而在點擊後的圖片文件命名爲"file_off"根據這個類別命名.更加的清晰.

4.基於屬性的命名規範
例如:裝飾性小圖片按照"<圖片內容說明>_<顏色>_<圖片尺寸>_<序號>.*"來表現.這個爲"heart_red_401*334_1.jpg"

5.基於序數的命名規範
在網頁中通常爲了減小圖片的下載時間把圖片分隔成一小部分,組成一個總體圖.這時能夠用二維數組的方式命名.
例如:    

這個圖片爲"donghua_11.jpg"

這個圖片爲"donghua_12.jpg"

這個圖片爲"donghua_21.jpg"

這個圖片爲"donghua_22.jpg"

這些組成一幅圖片.

6.基於枚舉的命名規範

第一個爲書的側面爲"ddd_cemian.jpg"
第二個爲書的封皮爲"ddd_fengpi.jpg"
第三個爲書的封底爲"ddd_fengdi.jpg"

還有的網站上圖片的欣賞也有不一樣的大小,可根據用戶的意願查看.

例如:"ddd_cemian_401*334.jpg"和"ddd_cemian_1024*768.jpg"

這些供你們建設網站參考.

爲避免代碼衝突（這樣作也會讓你的代碼更爲通用），就要使用命名法則，這是一個很好的編程習慣。好啦，這裏介紹一些經常使用的法則。

◆命名變量、方法、以及屬性

變量、方法和屬性的名稱的第一個字母應該大寫，而且名稱應該能表達出它們的用途（或者說是意義）。

變量
.NET 命名
匈牙利命名
描述

Cstring
EmployeeName
szName
Name of an employee.

Int
AttendanceCounter
nCounter
A counter of type long.

Long
NumberOfBytes
lBytes
A long type variable stores bytes.

有時咱們習慣於在定義中使用下劃線 "_"，例如： Add_Data(int a, int b). 按照新的命名法則，這不是一個好的編程習慣，雖然它並無錯。你應該將定義 Add_Data 改成 AddData。 這不是微軟的標準，你也不是必須按照這些法則。可是，在一些地方你會明白下邊這些法則的合理性。

就我我的而言，我更喜歡匈牙利命名法。固然，變量也使用一樣的法則。若是你記得匈牙利命名法的話，一個布爾型的變量定義以"b"打頭，好比：

BOOL bFlag = TRUE;

新的法則不推薦使用Flag 和 "b"：

bool IsFileFound = true;

你能夠瀏覽一下MSDN，那裏邊有更多有關新的法則的說明。

◆命名組件以及集合（Assemblies）

爲避免代碼衝突, 按照命名法則給你的庫(在 .NET 中稱爲assembly)命名是一個良好的編程習慣。假定你是MindCracker 公司的，你在開發一個用於擴充C# database 類的庫, 把它的名字命名爲MindCracker.DatabaseAssembly.ADOSet 要比MyAssembly.Database.ADOSet好的多。

再假定你的庫有一個方法，它是從表中讀取數據，並返回一個數據集。你若是取名爲 DataSet return_data()的話，改成DataSet ReturnData()好啦.

你還應該在命名中遵循一個統一的單詞順序。例如，你有倆個表，分別爲Employee 和 Manager ，而且你還爲它們分別定義了一個向表裏邊插入一條記錄的方法， 那麼方法名AppendEmployee 和 AppendManager 要比AppendEmployee 和 ManagerAppend要好。
我更喜歡的二種方法，由於很容易清楚一個塊兒結構和嵌套塊兒結構。

◆匈牙利命名法（efoxxx附）

匈牙利命名法是一名匈牙利程序員發明的，並且他在微軟工做了多年。此命名法就是經過微軟的各類產品和文檔傳出來的。多數有經驗的程序員，無論他們用的是哪門兒語言，都或多或少在使用它

這種命名法的基本原則是：

變量名＝屬性＋類型＋對象描述

即一個變量名是由三部分信息組成，這樣，程序員很容易理解變量的類型、用途，並且便於記憶。

下邊是一些推薦使用的規則例子，你能夠挑選使用，也能夠根據我的喜愛做些修改再用之。

⑴屬性部分：

全局變量： g_

常量 ： c_

類成員變量： m_

⑵類型部分：

指針： p

句柄： h

布爾型： b

浮點型： f

無符號： u

⑶描述部分：

初始化： Init

臨時變量： Tmp

目的對象： Dst

源對象： Src

窗口： Wnd

將介紹匈牙利命名法，後面的例子裏也會盡可能遵照它和上面的代碼風格。仍是那句話，並非要求全部的讀者都要去遵照，可是但願讀者做爲一個現代的軟件開發人員都去遵照它。

a       Array                                 數組

b       BOOL (int)                            布爾(整數)

by      Unsigned Char (Byte)                  無符號字符(字節)

c       Char                                  字符(字節)

cb      Count of bytes                        字節數

cr      Color reference value                 顏色(參考)值

cx      Count of x (Short)                    x的集合(短整數)

dw      DWORD   (unsigned long)                 雙字(無符號長整數)

f       Flags   (usually multiple bit values)   標誌(通常是有多位的數值)

fn      Function                              函數

g_      global                                全局的

h       Handle                                句柄

i       Integer                               整數

l       Long                                  長整數

lp      Long pointer                          長指針

m_      Data member of a class                一個類的數據成員

n       Short int                             短整數

p       Pointer                               指針

s       String                                字符串

sz      Zero terminated String                以0結尾的字符串

tm      Text metric                           文本規則

u       Unsigned int                          無符號整數

ul      Unsigned long (ULONG)                 無符號長整數

w       WORD (unsigned short)                 無符號短整數

x,y     x, y coordinates (short)              座標值/短整數

v       void                                  空

下邊舉例說明：

hwnd： h表示句柄，wnd表示窗口，合起來爲「窗口句柄」。

m_bFlag： m表示成員變量，b表示布爾，合起來爲：「某個類的成員變量，布爾型，是一個狀態標誌」。

C# .net 命名規範 
一個好的命名規範如此難找，仍是本身收藏一個比較好

1 ADO.NET          命名規範          數據類型          數據類型簡寫          標準命名舉例          
Connection          con          conNorthwind          
Command          cmd          cmdReturnProducts          
Parameter       parm          parmProductID          
DataAdapter      dad          dadProducts          
DataReader      dtr          dtrProducts          
DataSet          dst          dstNorthWind          
DataTable        dtbl          dtblProduct          
DataRow          drow          drowRow98          
DataColumn         dcol          dcolProductID          
DataRelation      drel          drelMasterDetail          
DataView          dvw          dvwFilteredProducts       

WinForm          Control          命名規範

數據類型          數據類型簡寫          標準命名舉例          
Label            lbl          lblMessage          
LinkLabel       llbl          llblToday          
Button          btn          btnSave          
TextBox          txt          txtName          
MainMenu          mmnu          mmnuFile          
CheckBox          chk          chkStock          
RadioButton      rbtn          rbtnSelected          
GroupBox          gbx          gbxMain          
PictureBox       pic          picImage          
Panel             pnl          pnlBody          
DataGrid          dgrd          dgrdView          
ListBox          lst          lstProducts          
CheckedListBox    clst          clstChecked          
ComboBox          cbo          cboMenu          
ListView          lvw          lvwBrowser          
TreeView          tvw          tvwType          
TabControl          tctl          tctlSelected          
DateTimePicker     dtp          dtpStartDate          
HscrollBar          hsb          hsbImage          
VscrollBar          vsb          vsbImage          
Timer              tmr          tmrCount          
ImageList          ilst          ilstImage          
ToolBar           tlb          tlbManage          
StatusBar          stb          stbFootPrint          
OpenFileDialog      odlg          odlgFile          
SaveFileDialog      sdlg          sdlgSave          
FoldBrowserDialog   fbdlg          fgdlgBrowser          
FontDialog          fdlg          fdlgFoot          
ColorDialog          cdlg          cdlgColor          
PrintDialog          pdlg          pdlgPrint       

3          WebControl          命名規範

數據類型          數據類型簡寫          標準命名舉例          
AdRotator          adrt          Example          
Button             btn          btnSubmit          
Calendar          cal          calMettingDates          
CheckBox          chk          chkBlue          
CheckBoxList       chkl          chklFavColors          
CompareValidator   valc          valcValidAge          
CustomValidator     valx          valxDBCheck          
DataGrid           dgrd          dgrdTitles          
DataList           dlst          dlstTitles          
DropDownList       drop          dropCountries          
HyperLink          lnk          lnkDetails          
Image             img          imgAuntBetty          
ImageButton      ibtn          ibtnSubmit          
Label            lbl          lblResults          
LinkButton       lbtn          lbtnSubmit          
ListBox          lst          lstCountries          
Panel            pnl          pnlForm2          
PlaceHolder     plh          plhFormContents          
RadioButton          rad          radFemale          
RadioButtonList          radl          radlGender          
RangeValidator          valg          valgAge          
RegularExpression          vale          valeEmail_Validator          
Repeater                    rpt          rptQueryResults          
RequiredFieldValidator      valr          valrFirstName          
Table              tbl          tblCountryCodes          
TableCell          tblc          tblcGermany          
TableRow          tblr          tblrCountry          
TextBox            txt          txtFirstName          
ValidationSummary    vals          valsFormErrors          
XML                xmlc          xmlcTransformResults       

.NET中的命名規則

名稱空間的命名　

　　 命名名稱空間的通常規則以下： 
　　 CompanyName.TechnologyName
　　這樣，咱們看到的名稱空間應該是這樣的：　　
　 　Microsoft.Office
　　 PowerSoft.PowerBuilder 　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　

　　注意：這只是一個原則。第三方公司能夠選擇其它的名字。
　　避免用公司名稱或其它著名品牌的名稱做爲名稱空間的前綴，這樣會形成兩個公佈的名稱空間有同一個名稱的可能性。
　　例如： 將微軟提供的Office自動類命名爲Microsoft.Office

　　使用Pascal大寫方式，用逗號分隔邏輯成分。
　　例如：Microsoft.Office.PowerPoint

　　若是你的品牌使用的是非傳統大寫方式，那麼必定要遵循你的品牌所肯定使用的大寫方式，即便這種方式背離了一般的名稱空間大寫規則。
　　例如：NeXT.WebObjects
　　　　　ee.cummings

類和類成分的命名

　　類的命名原則是用名詞或名詞短語命名類，使用Pascal大寫。減小類名中縮寫的使用量。不要使用任何類前綴（好比C），不要使用帶下劃線的字符。
　　例如：public class FileStream {}
　　　　　 public class Button {}
　　　　　 public class String {}

 

 

 

CSS 類和ID的經常使用命名：

網站頭部:    head/header(頭部) top（頂部）導航：   nanv 導航具體區分：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命名我會常常用大小寫和_來區分，好比主導航就是MainNav,若是還有必要在區分就是MainNav_1,MainNav_2等等。也可使用"類型+變量名稱"的規則來命名，好比寫一個紅色字體的class,能夠
.f_red {}(f是font 字體的縮寫)。總之原則是：大小寫、_、縮寫，大大加強代碼的可讀性。

另外我還常用"in"的寫法作子divd的命名，寫法in+父div,這樣能夠避免前面命名過了後面div不知道怎麼去命名。好比intop、inbox、infrom、inlogin等等。

 

另一些：文件夾主要創建如下文件夾： 　　一、Images 存放一些網站經常使用的圖片； 　　二、Css 存放一些CSS文件； 　　三、Flash 存放一些Flash文件； 　　四、PSD 存放一些PSD源文件； 　　五、Temp 存放全部臨時圖片和其它文件； 　　六、copyright 版權信息（可選） 　　八、readme 說明文件 　　css統一命名 　　注：本CSS命名規則只適合物table製做模式下 　　一、 css文件統一放在css文件夾下；命名css.css 　　二、 主樣式定義：body、table、td、tr、a 　　三、 連接樣式定義：link_white（白色）；link_black （黑色）；link_blue （藍色） 等等； 　　說明：若有重複的後面加阿拉伯數字；如 link_red01 有下劃線的如：linkred 　　四、 文字樣式定義：font_red （紅色）；font_red_14 （紅色14號字）；font_red_14b （紅色14號加粗） 　　五、 邊框樣式定義：border_red_tblr （紅色四個邊）；border_red_blr（紅色底左右三邊）；border_red_lr（紅色左右兩個邊）；border_red_b （紅色底一個邊）等等； 　　六、 表單樣式定義：text_100 （文本字段寬爲100）； textarea_200_red （文本區域寬爲200有紅色邊框）；select_100 （列表寬爲100）；button_150 （按鈕寬150）； 　　說明：表單用寬度定義，在命名中最長寫到：「text_100_red」 　　七、 線的樣式定義：line_X （橫線）；line_Y （豎線）；line_X_red （紅色橫線）；line_X_red2 （兩個像素的紅色橫線）；說明：在line中只定義虛線，實線在border中定義 　　八、 其它樣式定義：在這裏主要定義一些個性化的樣式； 　　文件命名 　　head.asp 頭文件 　　foot.asp 底文件 　　index.asp 首頁文件 　　sort.html 分類嵌套文件 　　article_channel.asp 文章_頻道頁 　　article_list.asp 文章_列表頁 　　article_detail.asp 文章_顯示頁 　　註明：若是有多個文章頻道，則用article01， article02，article03等等 　　exhibit_channel.asp 展會信息_頻道頁 　　exhibit_list.asp 展會信息_列表頁 　　exhibit_detail.asp 展會信息_顯示頁 　　product_channel.asp 產品中心_頻道頁 　　product_list.asp 產品中心_列表頁 　　prodect_detail.asp 產品中心_顯示頁 　　corporation_channel.asp 會員_頻道頁 　　corporation_list.asp 會員_列表頁 　　corporation_detail.asp 會員_顯示頁 　　information_channel.asp 商機信息_頻道頁 　　information_list.asp 商機信息_列表頁 　　information_detail.asp 商機信息_顯示頁 　　job_channel.asp 招聘_頻道頁 　　job_list.asp 招聘_列表頁 　　job_detail.asp 招聘_顯示頁 　　hr_channel.asp 求職_頻道頁 　　hr_list.asp 求職_列表頁 　　hr_detail.asp 求職_顯示頁 　　job_hr_channel.asp 人才中心_頻道頁 　　job_hr_lisr.asp 人才中心_列表頁 　　job_hr_detail.asp 人才中心顯示頁 　　copyright.asp 版權頁 　　圖片命名 　　一、導航命名：menu.gif 如：menubg .gif（導航的背景圖） 　　二、會員登陸：login.gif 如：loginbg.gif （會員登錄的背景圖） 　　三、搜索命名：search.gif 如：search_bg.gif （搜索的背景圖） 　　四、小 圖 標：ico_數字.gif 如：ico_001.gif 　　五、線的命名：line_X_顏色.gif 如：line_X_red.gif（紅色橫向虛線）說明：line只命名虛線 　　line_Y_red.gif（紅色縱向虛線） 　　六、廣告命名：ad_數字.gif 如：ad001.gif 　　七、其它欄目的圖片：以欄目名的第一個字母.gif 　　如：xwzx_bg.gif （新聞中心背景） cpzx_l.gif （產品中心的左邊圖） 　　八、產品與欄目熱點圖片： pic_數字.gif 如：pic_001.gif 　　說明：上、下、左、右 能夠縮寫爲T、B、L、R 　　CSS標準化設計命名 　　一、類class的命名規範示例 　　頭：header 　　內容：content/container 　　尾：footer 　　導航：nav 　　側欄：sidebar 　　欄目：column 　　頁面外圍控制總體佈局寬度：wrapper 　　左右中：left right center 　　登陸條：loginbar 　　標誌：logo 　　廣告：banner 　　頁面主體：main 　　熱點：hot 　　新聞：news 　　下載：download 　　子導航：subnav 　　菜單：menu 　　子菜單：submenu 　　搜索：search 　　友情連接：friendlink 　　頁腳：footer 　　版權：copyright 　　滾動：scroll 　　內容：content 　　標籤頁：tab 　　文章列表：list 　　提示信息：msg 　　小技巧：tips 　　欄目標題：title 　　加入：joinus 　　指南：guild 　　服務：service 　　註冊：regsiter 　　狀態：status 　　投票：vote 　　合做夥伴：partner 　　二、註釋的寫法 　　/ Footer / 　　內容區 　　/ End Footer / 　　三、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 { } 　　五、CSS文件命名示例 　　主要的 master.css 　　模塊 module.css 　　基本共用 base.css 　　佈局，版面 layout.css 　　主題 themes.css 　　專欄 columns.css 　　文字 font.css 　　表單 forms.css 　　補丁 mend.css 　　打印 print.css 　　六、注意事項 　　（1）一概小寫； 　　（2）儘可能用英文； 　　（3）不加中槓和下劃線； 　　（4）儘可能不縮寫，除非一看就明白的單詞 以上內容均爲轉載，如涉及版權問題，請與本人聯繫！