css命名

html頁面的CSS辨泳、DIV命名規(guī)則

CSS命名規(guī)則

頭: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

狀態(tài):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

功能區(qū):shop

標題:title

加入:joinus

狀態(tài):status

按鈕:btn

滾動:scroll

標簽頁:tab

文章列表:list

提示信息:msg

當前的: current

小技巧:tips

圖標: icon

注釋:note

指南:guild

服務:service

熱點:hot

新聞:news

下載:download

投票:vote

合作伙伴:partner

友情鏈接:link

版權:copyright

CSS+DIV的命名規(guī)則:

登錄條: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
  狀態(tài):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
  功能區(qū):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
功能區(qū):  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 -->
內容區(qū)
<-- 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

數(shù)據(jù)庫中的命名規(guī)則

數(shù)據(jù)庫涉及字符規(guī)則

采用26個英文字母(區(qū)分大小寫)和0 -9這十個自然數(shù),加上下劃線_組成毅人,共63個字符吭狡。不能出現(xiàn)其他字符(注釋除外)。

數(shù)據(jù)庫對象命名規(guī)則

數(shù)據(jù)庫對象包括表丈莺、視圖(查詢)划煮、存儲過程(參數(shù)查詢)、函數(shù)缔俄、約束弛秋。對象名字由前綴和實際名字組成器躏,長度不超過30。前綴:使用小寫字母蟹略。

例如:表-tb 視圖-vi 存儲過程-sp 函數(shù)-fn

實際名字

實際名字盡量描述實體的內容登失,由單詞或單詞組合,每個單詞的首字母大寫挖炬,其他字母小寫揽浙,不以數(shù)字和_開頭。

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

因此意敛,合法的對象名字類似如下馅巷。

表 tbUser_Info、tbMessage_Detail

視圖 vi_MessageList

存儲過程 sp_MessageAdd

數(shù)據(jù)庫表命名規(guī)則

字段由前綴和實際名字組成草姻。實際名字中首單詞一個系統(tǒng)盡量采取同一單詞钓猬。

前綴:使用小寫字母tb,表示表撩独。

例如:tbMember   tbMember_Info   tbForum_Board   tbForum_Thread1

字段命名規(guī)則

數(shù)字敞曹、字符、日期/時間综膀、lob(大對象)异雁、雜項,字段由表的簡稱僧须、下劃線纲刀,實際名字加后綴組成。

后綴:使用小寫字母担平,代表該字段的屬性示绊。

例如:  User_Idint     User_Namestr     User_RegDatedtm

視圖命名規(guī)則

字段由前綴和實際名字組成,中間用下劃線連接暂论。

前綴:使用小寫字母vi面褐,表示視圖。

例如:vi_User    vi_UserInfo

存儲過程命名規(guī)則

字段由前綴和實際名字組成取胎,中間用下劃線連接展哭。
前綴:使用小寫字母sp,表示存儲過程闻蛀。
例如:sp_User

數(shù)據(jù)庫設計文檔規(guī)則

所有數(shù)據(jù)庫設計要寫成文檔匪傍,文檔以模塊化形式表達。大致格式如下:

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

'  表名:  tbUser_Info

'  建立人:UAM_Richard

'  日期:  2004-12-17

'  版本:  1.0

'  描述:  保存用戶資料

'  具體內容:

'  UserId  int觉痛,自動增量  用戶代碼

'  UserName  char(12)  用戶名字

'  ......

'--------------------------------------------
CSS類及id中的命名規(guī)則

Web開發(fā)人員可以通過創(chuàng)建CSS類及id名稱并使用這些名稱來對div以及其他的格式頁面元素進行標識役衡。對開發(fā)人員來說,在命名重新定義XHTML標記(tags)的CSS selectors時薪棒,必須保證其與預定義的標記準確匹配手蝎,但就類以及id選擇器名稱而言榕莺,則仁者見仁,智者見智棵介。然而隨心所欲的為這些類以及id命名則并不是個好的習慣钉鸯。

1、直觀命名

當在設計Web頁面以及需要對一個div進行標識的時候邮辽,最自然的想法就是使用可以描述元素所在頁面位置的詞匯來對其命名唠雕。

例如:top-panel

horizontal-nav

left-side

center-column

right-col

這些是CSS以及XHTML類和id的有效命名方式。這些詞匯簡單并且能夠使人顧名思義逆巍,因此滿足了標識頁面元素以及相應的CSS樣式的需要及塘。

但問題是這樣的名稱同頁面內容的特定表達方式相關聯(lián)莽使。這些命名參考了某種特定頁面布局中的頁面元素位置锐极,因此在這樣的布局之外使用就會顯得不合適甚至造成理解混亂。這些命名沒有涉及文檔內容的結構芳肌。因此灵再,下面給出了對CSS類以及ID命名更好的方法。

2亿笤、結構化命名

這些是CSS以及XHTML類和id的有效命名方式翎迁。這些詞匯簡單并且能夠使人顧名思義,因此滿足了標識頁面元素以及相應的CSS樣式的需要净薛。 這些是CSS以及XHTML類和id的有效命名方式汪榔。這些詞匯簡單并且能夠使人顧名思義,因此滿足了標識頁面元素以及相應的CSS樣式的需要肃拜。

有標記的相關信息都是用來描述文檔的結構而不是外觀痴腌。這樣的特點使得我們可以通過簡單的改變CSS的方式來對不同外觀格式下的內容(content)以及標記(markup)進行重用。當你理解這種方式時燃领,很容易就可以發(fā)現(xiàn)采用頁面位置來為類以及id命名的方式在處理如音頻(audio)等外觀格式上顯得非常不合適士聪。因此,應當根據(jù)在文檔中的使用目的而非出現(xiàn)位置來對類以及id進行結構化命名猛蔽。

可以按照如下所示的結構化方式來對類以及id名稱命名:

例如:branding

main-nav

subnav

main-content

sidebar

這些名字同直觀命名方式一樣非常易懂剥悟,但他們描述了頁面元素的作用而非位置。這使得代碼更加符合使用純粹的結構化標記(structural markup)的初衷曼库,即開發(fā)人員可以在不改變標記的情況下對各種各樣媒體下的顯示格式進行處理区岗。

即使你不打算在其他的媒體上對Web頁面進行格式修改,使用結構化命名方式還可以幫助你在日后的站點升級或重新設計中更為輕松毁枯。例如躏尉,結構化命名避免了當一個div同id right-column移動到頁面左邊后所帶來的混亂。對div sidebar的采用這樣的命名方式就顯得更加適當后众,因為無論它出現(xiàn)在頁面的哪一邊胀糜,這個名字仍然對開發(fā)人員來說直觀易懂颅拦。

3、慣例

Andy Clarke分析了40份由推崇標準化Web設計理念的開發(fā)人員所設計的Web站點的源代碼教藻。盡管類以及id名稱很不統(tǒng)一距帅,但是還是發(fā)現(xiàn)了一些頻繁出現(xiàn)的常用名稱。這里給出了最常用類/id名稱的示例列表:

例如:header

content

nav

sidebar

footer

3.基于成員的命名規(guī)范
基于成員的命名規(guī)范是指按照文件,文件夾的從屬關系,通過歸類的方法進行命名,這樣可以使文件的排列具有較強的邏輯性.
例如:一個圖片文件是在鼠標點擊之前為"file_on".而在點擊后的圖片文件命名為"file_off"根據(jù)這個類別命名.更加的清晰.

4.基于屬性的命名規(guī)范
例如:裝飾性小圖片按照"<圖片內容說明><顏色><圖片尺寸>_<序號>."來表現(xiàn).這個為"heart_red_401334_1.jpg"

5.基于序數(shù)的命名規(guī)范
在網頁中一般為了減少圖片的下載時間把圖片分隔成一小部分,組成一個整體圖.這時可以用二維數(shù)組的方式命名.
例如:

這個圖片為"donghua_11.jpg"

這個圖片為"donghua_12.jpg"

這個圖片為"donghua_21.jpg"

這個圖片為"donghua_22.jpg"

這些組成一幅圖片.

6.基于枚舉的命名規(guī)范

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

還有的網站上圖片的欣賞也有不同的大小,可根據(jù)用戶的意愿查看.

例如:"ddd_cemian_401334.jpg"和"ddd_cemian_1024768.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 公司的竖螃,你在開發(fā)一個用于擴充C# database 類的庫, 把它的名字命名為MindCracker.DatabaseAssembly.ADOSet 要比MyAssembly.Database.ADOSet好的多。

再假定你的庫有一個方法逗余,它是從表中讀取數(shù)據(jù)特咆,并返回一個數(shù)據(jù)集。你如果取名為 DataSet return_data()的話,改為DataSet ReturnData()好啦.

你還應該在命名中遵循一個統(tǒng)一的單詞順序腻格。例如画拾,你有倆個表,分別為Employee 和 Manager 菜职,并且你還為它們分別定義了一個向表里邊插入一條記錄的方法青抛, 那么方法名AppendEmployee 和 AppendManager 要比AppendEmployee 和 ManagerAppend要好。
我更喜歡的二種方法酬核,因為很容易清楚一個塊兒結構和嵌套塊兒結構蜜另。

◆匈牙利命名法(efoxxx附)

匈牙利命名法是一名匈牙利程序員發(fā)明的,而且他在微軟工作了多年嫡意。此命名法就是通過微軟的各種產品和文檔傳出來的举瑰。多數(shù)有經驗的程序員,不管他們用的是哪門兒語言蔬螟,都或多或少在使用它

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

變量名=屬性+類型+對象描述

即一個變量名是由三部分信息組成此迅,這樣,程序員很容易理解變量的類型促煮、用途邮屁,而且便于記憶整袁。

下邊是一些推薦使用的規(guī)則例子菠齿,你可以挑選使用,也可以根據(jù)個人喜好作些修改再用之坐昙。

⑴屬性部分:

全局變量: g_

常量 : c_

類成員變量: m_

⑵類型部分:

指針: p

句柄: h

布爾型: b

浮點型: f

無符號: u

⑶描述部分:

初始化: Init

臨時變量: Tmp

目的對象: Dst

源對象: Src

窗口: Wnd

將介紹匈牙利命名法绳匀,后面的例子里也會盡量遵守它和上面的代碼風格。還是那句話炸客,并不是要求所有的讀者都要去遵守疾棵,但是希望讀者作為一個現(xiàn)代的軟件開發(fā)人員都去遵守它。

a Array 數(shù)組

b BOOL (int) 布爾(整數(shù))

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

c Char 字符(字節(jié))

cb Count of bytes 字節(jié)數(shù)

cr Color reference value 顏色(參考)值

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

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

f Flags (usually multiple bit values) 標志(一般是有多位的數(shù)值)

fn Function 函數(shù)

g_ global 全局的

h Handle 句柄

i Integer 整數(shù)

l Long 長整數(shù)

lp Long pointer 長指針

m_ Data member of a class 一個類的數(shù)據(jù)成員

n Short int 短整數(shù)

p Pointer 指針

s String 字符串

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

tm Text metric 文本規(guī)則

u Unsigned int 無符號整數(shù)

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

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

x,y x, y coordinates (short) 坐標值/短整數(shù)

v void 空

下邊舉例說明:

hwnd: h表示句柄痹仙,wnd表示窗口是尔,合起來為“窗口句柄”。

m_bFlag: m表示成員變量开仰,b表示布爾拟枚,合起來為:“某個類的成員變量,布爾型众弓,是一個狀態(tài)標志”恩溅。

C# .net 命名規(guī)范
一個好的命名規(guī)范如此難找,還是自己收藏一個比較好

1 ADO.NET 命名規(guī)范 數(shù)據(jù)類型 數(shù)據(jù)類型簡寫 標準命名舉例
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 命名規(guī)范

數(shù)據(jù)類型 數(shù)據(jù)類型簡寫 標準命名舉例
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 命名規(guī)范

數(shù)據(jù)類型 數(shù)據(jù)類型簡寫 標準命名舉例
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中的命名規(guī)則

名稱空間的命名

命名名稱空間的一般規(guī)則如下:
   CompanyName.TechnologyName
  這樣谓娃,我們看到的名稱空間應該是這樣的:  
   Microsoft.Office
   PowerSoft.PowerBuilder

注意:這只是一個原則脚乡。第三方公司可以選擇其它的名字。
  避免用公司名稱或其它著名品牌的名稱作為名稱空間的前綴滨达,這樣會造成兩個公布的名稱空間有同一個名稱的可能性奶稠。
  例如: 將微軟提供的Office自動類命名為Microsoft.Office

使用Pascal大寫方式俯艰,用逗號分隔邏輯成分。
  例如:Microsoft.Office.PowerPoint

如果你的品牌使用的是非傳統(tǒng)大寫方式锌订,那么一定要遵循你的品牌所確定使用的大寫方式蟆炊,即使這種方式背離了通常的名稱空間大寫規(guī)則。
  例如:NeXT.WebObjects
     ee.cummings

類和類成分的命名

類的命名原則是用名詞或名詞短語命名類瀑志,使用Pascal大寫涩搓。減少類名中縮寫的使用量。不要使用任何類前綴(比如C)劈猪,不要使用帶下劃線的字符昧甘。
  例如:public class FileStream {}
      public class Button {}
      public class String {}

CSS 類和ID的常用命名:

網站頭部: head/header(頭部) top(頂部)導航: nanv 導航具體區(qū)分: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(購物區(qū))雇毫、list(列表/清單)玄捕、newslist(新聞列表)、downloadlist(下載列表)棚放、piclist(圖片列表)枚粘、dropmenv(下拉菜單)、cor/corner(圓角)飘蚯、homepage(首頁)馍迄、crumb(當前位置導航)
實際上上面的id命名我會經常用大小寫和來區(qū)分,比如主導航就是MainNav,如果還有必要在區(qū)分就是MainNav_1,MainNav_2等等局骤。也可以使用"類型+變量名稱"的規(guī)則來命名攀圈,比如寫一個紅色字體的class,可以
.f_red {}(f是font 字體的縮寫)÷退Γ總之原則是:大小寫赘来、
、縮寫凯傲,大大增強代碼的可讀性犬辰。

另外我還經常使用"in"的寫法做子divd的命名,寫法in+父div,這樣可以避免前面命名過了后面div不知道怎么去命名冰单。比如intop幌缝、inbox、infrom球凰、inlogin等等狮腿。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末腿宰,一起剝皮案震驚了整個濱河市呕诉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌吃度,老刑警劉巖甩挫,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異椿每,居然都是意外死亡伊者,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門间护,熙熙樓的掌柜王于貴愁眉苦臉地迎上來亦渗,“玉大人,你說我怎么就攤上這事汁尺》ň” “怎么了?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長搂蜓。 經常有香客問我狼荞,道長,這世上最難降的妖魔是什么帮碰? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任相味,我火速辦了婚禮,結果婚禮上殉挽,老公的妹妹穿的比我還像新娘丰涉。我一直安慰自己,他們只是感情好斯碌,可當我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布昔搂。 她就那樣靜靜地躺著,像睡著了一般输拇。 火紅的嫁衣襯著肌膚如雪摘符。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天策吠,我揣著相機與錄音逛裤,去河邊找鬼。 笑死猴抹,一個胖子當著我的面吹牛带族,可吹牛的內容都是我干的。 我是一名探鬼主播蟀给,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼蝙砌,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了跋理?” 一聲冷哼從身側響起屯断,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎盆犁,沒想到半個月后酥艳,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡拭卿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年骡湖,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片峻厚。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡响蕴,死狀恐怖,靈堂內的尸體忽然破棺而出惠桃,到底是詐尸還是另有隱情浦夷,我是刑警寧澤懊渡,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站军拟,受9級特大地震影響剃执,放射性物質發(fā)生泄漏。R本人自食惡果不足惜懈息,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一肾档、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧辫继,春花似錦怒见、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至炮车,卻和暖如春舵变,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背瘦穆。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工纪隙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人扛或。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓绵咱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親熙兔。 傳聞我的和親對象是個殘疾皇子悲伶,可洞房花燭夜當晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內容

  • 文章整理了Web前端開發(fā)中的各種CSS規(guī)范,包括文件規(guī)范住涉、注釋規(guī)范麸锉、命名規(guī)范、書寫規(guī)范秆吵、測試規(guī)范等淮椰。 一、文件規(guī)范...
    二狗子沒有夏天閱讀 1,853評論 0 35
  • CSS命名規(guī)則 頭:header內容:content/containe尾:footer導航:nav側欄:sideb...
    紋小艾閱讀 734評論 0 9
  • CSS命名規(guī)則 頭:header 內容:content/containe 尾:footer 導航:nav 側欄:s...
    王小傲閱讀 1,507評論 0 9
  • “你好,我已經來到這個城市1000天了争拐,時間的推移腋粥,足夠讓我愛上這里晦雨,慢慢開始熟悉這個城市的一切,復雜的公交線路隘冲,...
    MM_先生閱讀 251評論 0 0
  • 我還是恨你闹瞧,像兒時你媽打你,不講道理展辞。 我還是恨你奥邮,像童時碰到小草,就想踩你罗珍。 我還是恨你洽腺,像魚兒的記憶,只留七秒...
    風流靈巧惹人怨哎閱讀 647評論 2 5