html頁面的CSS、DIV命名規則
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
註：註
指南：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.另外在編輯樣式表時可用的註解可這樣寫：
內容區
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命名則並不是個好的習慣。
1、直觀命名
當在設計Web頁面以及需要對一個div進行標識的時候，最自然的想法就是使用可以描述元素所在頁面位置的詞彙來對其命名。
例如：top-panel
horizontal-nav
left-side
center-column
right-col
這些是CSS以及XHTML類別和id的有效命名方式。這些詞彙簡單並且能夠使人顧名思義，因此滿足了標識頁面元素以及相應的CSS樣式的需要。
但問題是這樣的名稱同頁面內容的特定表達方式相關聯。這些命名參考了某種特定頁面佈局中的頁面元素位置，因此在這樣的佈局之外使用就會顯得不合適甚至造成理解混亂。這些命名沒有涉及文檔內容的結構。因此，下面給出了對CSS類別以及ID命名更好的方法。
2、結構化命名
這些是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的採用這樣的命名方式就顯得更加適當，因為無論它出現在頁面的哪一邊，這個名字仍然對開發人員來說直觀易懂。
3、慣例
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
面板 pnl pnlBody
DataGrid dgrd dgrdView
列錶框 lst lstProducts
CheckedListBox clst clstChecked
ComboBox cbo cboMenu
清單檢視 lvw lvw瀏覽器
TreeView tvw tvwType
TabControl tctl tctlSelected
DateTimePicker dtp dtpStartDate
HscrollBar hsb hsbImage
VscrollBar vsb vsbImage
計時器 tmr 的Count
ImageList ilst ilstImage
工具列 tlb tlb管理
狀態列 stb stbFootPrint
OpenFileDialog odlg odlgFile
保存檔案對話方塊 sdlg sdlgSave
FoldBrowserDialog fbdlg fgdlgBrowser
FontDialog fdlg fdlgFoot
ColorDialog cdlg cdlgColor
PrintDialog pdlg 以 pdlgPrint
3 WebControl 命名規格
資料類型 資料類型簡寫 標準命名範例
AdRotator adrt 範例
按鈕 btn btn提交
日曆 cal calMettingDates
複選框 chk chkBlue
CheckBoxList chkl chklFavColors
CompareValidator valc valcValidAge
CustomValidator valx valxDBCheck
DataGrid dgrd dgrdTitles
資料清單 dlst dlstTitles
DropDownList drop dropCountries 且
超連結 lnk 詳細資料
圖片 img img貝蒂阿姨
ImageButton ibtn ibtnSubmit
標籤 lbl lbl結果
LinkButton lbtn lbtn提交
列錶框 lst lstCountries
面板 pnl pnlForm2
佔位符 plh plhFormContents
RadioButton rad radFemale
RadioButtonList radl radlGender
RangeValidator valg valgAge
正規表示式 vale valeEmail_Validator
中繼器 rpt
RequiredFieldValidator valr valrFirstName
表 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等等。
