前言
CSS 命名是團隊協作與代碼可維護性的基石。本文整理通用命名原則、頁面結構常用語義類名、詳細的 CSS 樣式命名對照表、CSS 檔案命名建議，助你建立專業、一致的命名體系。
一、通用命名原則（10 條鐵律）
- 全小寫：
.main-nav 不要寫 .MainNav。
- 屬性值用雙引號：
class="main-nav"。
- 標籤嚴格閉合、巢狀正確：結構清晰利於 SEO。
- 空元素自閉合：
<br />、<img />。
- 結構與表現分離：HTML 不寫
style、font、bgcolor 等表現屬性。
- 定義順序由大到小：先整體佈局再細節模組，體現文檔結構。
- 表格/表單加唯一 id：便於腳本與樣式精準定位。
- 圖片必加 alt：無障礙與 SEO 雙贏。
- 優先英文命名：避免拼音、中文，國際化通用。
- 不盡量縮寫：除非極通用（如
nav、btn、hd/ft）。
二、頁面外層核心結構命名
| 語義區塊 | 推薦類名/ID | 說明 |
|---|
| 最外層容器 | #wrap、#wrapper | 控制整體版面寬度 |
| 頁首 | #header、#head | Logo、主導航、搜尋等 |
| 主內容區 | #main、#content、#container | 頁面核心內容 |
| 左側欄 | .main-left、#sidebar、#sidebar_a | 側邊欄、左欄 |
| 右側欄 | .main-right、#sidebar_b | 右側邊欄 |
| 導航條 | #nav、#menu | 主導航、選單 |
| 次導航 | #subnav、#submenu | 二級選單、子選單 |
| 頁尾 | #footer、#foot | 版權、備案、友情連結 |
三、CSS 樣式命名對照表（精選高頻）
網頁公共模組
| 命名 | 用途 |
|---|
#layout | 整體佈局容器 |
#tag | 標籤雲、標記區 |
#msg、#message | 提示訊息區塊 |
#tips | 小貼士、提示 |
#vote | 投票模組 |
#friendlink | 友情連結 |
#title | 標題區 |
#summary | 摘要、簡介 |
#loginbar | 登錄條 |
#searchInput | 搜尋輸入框 |
#searchBar | 搜尋條（含按鈕） |
#search_results | 搜尋結果列表 |
#copyright | 版權資訊 |
#logo | 網站 Logo |
#branding | 品牌標識區 |
#siteinfo | 網站資訊 |
#joinus | 加入我們 |
#partner | 合作夥伴 |
#service | 服務項目 |
#register | 註冊區 |
.arr、.arrow | 箭頭圖示 |
#guild | 指南、幫助 |
#sitemap | 網站地圖 |
#list | 列表容器 |
#homepage | 首頁專用區 |
#subpage | 二級/子頁面 |
.tool、.toolbar | 工具列 |
.drop、.dropmenu | 下拉/下拉選單 |
.status | 狀態指示 |
.scroll | 滾動區域 |
.tab | 標籤頁 |
.left/.right/.center | 靠左/右/置中 |
.news | 新聞模組 |
.download | 下載模組 |
.banner | 廣告條/輪播圖 |
電子商務相關
| 命名 | 用途 |
|---|
.products | 商品列表/總覽 |
.products_prices | 商品價格 |
.products_description | 商品描述 |
.products_review | 用戶評論 |
.editor_review | 編輯推薦/評測 |
.news_release | 新品發布 |
.publisher | 廠商/品牌 |
.screenshot | 縮略圖/截圖 |
.faqs | 常見問題 |
.keyword | 關鍵字/標籤 |
.blog | 部落格文章 |
.forum | 論壇版塊 |
四、CSS 檔案命名建議
| 檔案名 | 用途 |
|---|
master.css、style.css | 主樣式表、入口檔 |
module.css | 模組/元件樣式 |
base.css | 基礎共用（reset、typography、variables） |
layout.css | 版面佈局（grid、container、sidebar） |
themes.css | 主題/換膚樣式 |
columns.css | 多欄佈局專用 |
font.css | 字體、排版 |
forms.css | 表單元素樣式 |
mend.css | 補丁/修正/覆寫 |
print.css | 列印樣式 |
五、團隊落地建議
- 建立專案命名規範文件，代碼評審時強制檢查。
- 使用
stylelint + 自訂規則自動攔截不合規命名。
- 採用 BEM（Block Element Modifier）或 SMACSS 等方法論，進一步規範類名結構。
- 定期重構舊代碼命名，避免技術債累積。
結語
良好的命名是給未來的自己與團隊最好的文檔。遵循「語義化、一致性、可擴展」三原則，配合對照表與工具鏈，即可構建清晰、專業的 CSS 架構。
