在前端開發中，規范使用 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
私有樣式/獨立頁面，根據實際情況，可以自定義命名 CSS 文件。
以上這些常用的文件命名，無需全部使用，根據實際情況，每個頁面引用不超過 3 個 CSS 文件。
6、 ID 和 Class 命名規范
(1)、主要的、重要的、特殊的、最外層的盒子使用 ID 屬性命名，其他的都使用 class 屬性命名。
(2)、命名規則須以內容優先，表現為輔。首先根據所要呈現的內容、功能來命名，如果內容實在無法找到合適的命名，可以再根據表現命名。
(3)、大多數情況下，命名都使用英文單詞，可以增加代碼的可讀性，但特殊情況下，實在找不到合適的單詞時，可以使用拼音命名，但必須簡明，結構清晰。
(4)、ID 和 Class 命名盡量全部都使用小寫，多個單詞可以使用連字符（-）鏈接，命名可以使用數字，但不能以數字開頭。
(5)、命名可以使用單詞縮寫，但必須確保是有效的縮寫，即別人能看懂，不能自定義縮寫。