網站命名規範大全:CSS規範便於交流

 良好的命名規範可以為團隊合作開發推波助瀾，無論在項目開發，還是產品維護上都起到了至關重要的作用。應該說命名規範是一種約定，也是程式員之間良好溝通的橋樑。

 

命名規則：

　　登入條: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