CSS 經常使用命名

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

一、頁面結構

　　wrap：外套、包裹，用於最外層。

　　wrapper：外套，用於頁面外圍控制總體佈局寬度。

　　box：盒子，容器。

　　header：頭部，用於頁頭部分。

　　nav：導航，主導航。

　　main：主要區域，內容主體。

　　content/container：內容，內容容器。

　　sidebar：側邊欄。

　　footer：底部，用於頁腳部分。

二、功能區塊

　　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：功能區，如購物車、收銀臺。

三、其餘經常使用命名

　　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：論壇。

四、產品相關命名

　　keyword：關鍵詞。

　　products：產品。

　　products-prices：產品價格。

　　products-description：產品描述。

　　products-review：產品評論。

　　editor-review：編輯評論。

　　news-products：最新產品。

　　publisher：生產商。

　　screenshot：縮略圖。

　　faqs：常見問題。

　　barnding：商標。

　　pay：充值。

　　reputation：信譽。

五、經常使用的文件命名

　　全局樣式：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 文件。

六、 ID 和 Class 命名規範

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

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

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

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

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