命名規范
1、主要的、重要的、特殊的、最外層的盒子使用 ID 屬性命名，其他的都使用 class 屬性命名。
2、命名規則須以內容優先，表現為輔。首先根據所要呈現的內容、功能來命名，如果內容實在無法找到合適的命名，可以再根據表現命名。
3、大多數情況下，命名都使用英文單詞，可以增加代碼的可讀性，但特殊情況下，實在找不到合適的單詞時，可以使用拼音命名，但必須簡明，結構清晰。
4、ID 和 Class 命名盡量全部都使用小寫，多個單詞可以使用連字符（-）鏈接，命名可以使用數字，但不能以數字開頭。
5、命名可以使用單詞縮寫，但必須確保是有效的縮寫，即別人能看懂，不能自定義縮寫。
屬性的書寫順序
屬性的書寫順序對於瀏覽器來說沒有區別，除了優先級覆蓋之外。但是如果順序保持一致的話，掃一眼可以很快地知道這個選擇器有什么類型的屬性影響了它，所以一般要把比較重要的屬性放前面。比較建議的順序是這樣的：
CSS 常用命名
在前端開發中，規范使用 DIV+CSS 命名，可以增強團隊合作提高開發效率，有利於頁面后期的維護和優化。
頁面結構 |
|
|---|---|
| 命名 | 作用 |
| wrap | 外套、包裹，用於最外層 |
| wrapper | 外套，用於頁面外圍控制整體布局寬度 |
| box | 盒子，容器 |
| header | 頭部，用於頁頭部分 |
| nav | 導航，主導航 |
| main | 主要區域，內容主體 |
| content/container | 內容，內容容器 |
| sidebar | 側邊欄 |
| footer | 底部，用於頁腳部分 |
常用的文件命名 |
|
|---|---|
| 命名 | 作用 |
| 全局樣式 | global.css |
| 布局結構 | layout.css |
| 基本共用 | base.css |
| 綜合樣式 | style.css |
| 主要的 | master.css |
| 模塊 | module.css |
| 表單 | forms.css |
| 主題/網頁換膚 | themes.css |
| 字體 | font.css |
| 打印 | print.css |
| 補丁 | mend.css |
產品相關命名 |
|
|---|---|
| 命名 | 作用 |
| keyword | 關鍵詞。 |
| products | 產品。 |
| products-prices | 產品價格。 |
| products-description | 產品描述。 |
| products-review | 產品評論。 |
| editor-review | 編輯評論。 |
| news-products | 最新產品。 |
| publisher | 生產商。 |
| screenshot | 縮略圖。 |
| faqs | 常見問題。 |
| barnding | 商標。 |
| pay | 充值。 |
| reputation | 信譽。 |
其他常用命名 |
|
|---|---|
| 命名 | 作用 |
| 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 | 論壇。 |
功能區塊 |
|
|---|---|
| 命名 | 作用 |
| 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 | 功能區，如購物車、收銀台。 |