CSS 經常使用命名

在前端開發中，規範使用 DIV+CSS 命名，能夠加強團隊合做提升開發效率，有利於頁面後期的維護和優化。

(1) 頁面結構

命名	做用
wrap	外套、包裹，用於最外層
wrapper	外套，用於頁面外圍控制總體佈局寬度
box	盒子，容器
header	頭部，用於頁頭部分
nav	導航，主導航
main	主要區域，內容主體
content/container	內容，內容容器
sidebar	側邊欄
footer	底部，用於頁腳部分

(2) 功能區塊

命名	做用
left center right	左中右
main-left	左側主要佈局
main-right	右側主要佈局
logo	網站 LOGO 標誌。
search	搜索輸入框。
loginbar	登陸條。
regsiter	註冊模塊。
banner	廣告，用於橫幅廣告條。
menu	菜單。
submenu	子菜單，二級菜單。
top	頂部。
topnav	頂導航。
mainnav	主導航。
subnav	子導航，二級導航。
leftsideBar	左導航。
rightsideBar	右導航。
topbar	頂部工具/菜單。
bottom	底部。
bottombar	底部工具欄。
tool	工具條。
shop	功能區，如購物車、收銀臺。

(3) 其餘經常使用命名

命名	做用
title	欄目標題。
summary	摘要。
hot	熱門熱點信息，推薦。
msg	提示信息。
news	新聞。
list	列表，文章列表。
piclist	圖片列表。
newslist	新聞列表。
search-output	搜索輸出。
search-results	搜索結果。
drop/dropdown	下拉。
dropmenu/dorpdown-content	下拉菜單。
scroll	滾動。
homepage	首頁。
subpage	子頁面，二級頁面。
tag	標籤。
tab	標籤頁。
tips	小技巧。
ranking	排行。
vote	投票。
bth	按鈕。
icon	圖標。
arr/arrow	箭頭。
status	狀態。
note	註釋。
skin	皮膚。
current	當前的。
active	活躍的，有效的。
download	下載。
friendLink	友情連接。
copyright	版權信息。
partner	合做夥伴。
joinus	加入咱們。
sitemap	網站地圖。
siteinfo	網站信息。
siteinfoLegar	法律聲明。
announcement	公告。
guild	指南。
service	服務。
promotion	推廣。
blog	博客。
forum	論壇。

(4) 產品相關命名

命名	做用
keyword	關鍵詞。
products	產品。
products-prices	產品價格。
products-description	產品描述。
products-review	產品評論。
editor-review	編輯評論。
news-products	最新產品。
publisher	生產商。
screenshot	縮略圖。
faqs	常見問題。
barnding	商標。
pay	充值。
reputation	信譽。

　　

(5) 經常使用的文件命名

命名	做用
全局樣式	global.css
佈局結構	layout.css
基本共用	base.css
綜合樣式	style.css
主要的	master.css
模塊	module.css
表單	forms.css
主題/網頁換膚	themes.css
字體	font.css
打印	print.css
補丁	mend.css

(6) ID 和 Class 命名規範

• 主要的、重要的、特殊的、最外層的盒子使用 ID 屬性命名，其餘的都使用 class 屬性命名。

• 命名規則須之內容優先，表現爲輔。首先根據所要呈現的內容、功能來命名，若是內容實在沒法找到合適的命名，能夠再根據表現命名。

• 大多數狀況下，命名都使用英文單詞，能夠增長代碼的可讀性，但特殊狀況下，實在找不到合適的單詞時，可使用拼音命名，但必須簡明，結構清晰。

• ID 和 Class 命名儘可能所有都使用小寫，多個單詞可使用連字符（-）連接，命名可使用數字，但不能以數字開頭。

• 命名可使用單詞縮寫，但必須確保是有效的縮寫，即別人能看懂，不能自定義縮寫。