在前端開發中，規范使用 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 命名盡量全部都使用小寫，多個單詞可以使用連字符（-）鏈接，命名可以使用數字，但不能以數字開頭。

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

轉載于:https://www.cnblogs.com/yinxiaofei/p/11194037.html

總結

以上是生活随笔為你收集整理的CSS 常用命名的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。