css命名規範

css命名規範

頁面結構命名

  1. page：代表整個頁面，用於最外層。
  2. wrap：外套，將所有元素包在一起的一個外圍包，用於最外層
  3. wrapper：頁面外圍控制整體佈局寬度，用於最外層
  4. container：一個整體容器，用於最外層
  5. head、header：頁頭區域，用於頭部
  6. nav：導航條
  7. content：內容，網站中最重要的內容區域，用於網頁中部主體
  8. main：網站中的主要區域（表示最重要的一塊位置），用於中部主體內容
  9. column：欄目
  10. sidebar：側欄
  11. foot、footer：頁尾、頁腳。網站一些附加信息放置區域，（或命名爲copyright）用於底部
導航命名

 1. nav、navbar、navigation、nav-wrapper：導航條或導航包，代表橫向導航
  2. topnav：頂部導航
  3. mainbav：主導航
  4. subnav：子導航
  5. sidebar：邊導航
  6. leftsidebar 或 sidebar_a ：左導航
  7. rightsidebar 或 sidebar_b：右導航
  8. title：標題
  9. summary：摘要/li>
  10. menu：菜單。區域包含一般的鏈接和菜單
  11. submenu：子菜單
  12. drop：下拉
  13. dorpmenu：下拉菜單
  14. links：鏈接菜單

功能命名

  1. logo：標記網站logo標誌
  2. banner：標語、廣告條、頂部廣告條
  3. login：登陸，（例如登錄表單：form-login）
  4. loginbar：登錄條
  5. regsiter：註冊
  6. tool、toolbar：工具條
  7. search：搜索
  8. searchbar：搜索條
  9. searchlnput：搜索輸入框
  10. shop：功能區，表示現在的
  11. icon：小圖標
  12. label：商標
  13. homepage：首頁
  14. subpage：二級頁面子頁面
  15. hot：熱門熱點
  16. list：文章列表，（例如新聞列表：list-news）
  17. scroll:滾動
  18. tab：標籤
  19. sitemap：網站地圖
  20. msg 或 message：提示信息
  21. current：當前的
  22. joinus：加入
  23. status：狀態
  24. btn：按鈕，（例如搜索按鈕可寫成：btn-search）
  25. tips：小技巧
  26. note：註釋
  27. guild：指南
  28. arr、arrow：標記箭頭
  29. service：服務
  30. breadcrumb：(即頁面所處位置導航提示）
  31. download：下載
  32. vote：投票
  33. siteinfo：網站信息
  34. partner：合作伙伴
  35. link、friendlink：友情鏈接
  36. copyright：版權信息
  37. siteinfoCredits：信譽
  38. siteinfoLegal：法律信息

CSS樣式命名

 1. 頁面線條命名：line_x （橫線）、line_y （縱線）或 line_red（紅線）、line_black（黑線）
  2. 圖片圖標命名：pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
  3. 頁面廣告命名：ad_01、ad_02
  4. 背景框架命名：nav_bg（代表導航條的背景圖片位置）、tool_bg（代表工具欄的背景圖片位置）

CSS樣式表命名

 1. index.css：單獨爲首頁建立樣式
  2. head.css：頭部樣式，多個頁面頭部設計風格相同時使用。
  3. base.css：共用樣式。
  4. style.css：獨立頁面所使用的樣式文件。
  5. global.css：頁面樣式基礎，全局公用樣式，頁面中必須包含。
  6. layout.css：佈局、版面樣式，公用類型較多時使用，一般用在首頁級頁面和產品類頁面中
  7. module.css：模塊，用於產品類頁，也可與其它樣式配合使用。
  8. master.css：主要的樣式表
  9. columns.css：專欄樣式
  10. themes.css：主體樣式
  11. forms.css：表單樣式
  12. mend.css：補丁，基於以上樣式進行的私有化修補。