關於團隊合做的css命名規範css
經常使用的css命名規則：
- 頭：header
- 內容：content/container
- 尾：footer
- 導航：nav
- 側欄：sidebar
- 欄目：column
- 頁面外圍控制總體佈局寬度：wrapper
- 左右中：left right center
- 登陸條：loginbar
- 標誌：logo
- 廣告：banner
- 頁面主體：main
- 熱點：hot
- 新聞：news
- 下載：download
- 子導航：subnav
- 菜單：menu
- 子菜單：submenu
- 搜索：search
- 友情連接：friendlink
- 頁腳：footer
- 版權：copyright
- 滾動：scroll
- 內容：content
- 標籤頁：tab
- 文章列表：list
- 提示信息：msg
- 小技巧：tips
- 欄目標題：title
- 加入：joinus
- 指南：guild
- 服務：service
- 註冊：regsiter
- 狀態：status
- 投票：vote
- 合做夥伴：partner
註釋的寫法：html
/* Footer */app
內容區ide
/* End Footer */佈局
id的命名：
(1)頁面結構post
- 容器: container
- 頁頭：header
- 內容：content/container
- 頁面主體：main
- 頁尾：footer
- 導航：nav
- 側欄：sidebar
- 欄目：column
- 頁面外圍控制總體佈局寬度：wrapper
- 左右中：left right center
(2)導航字體
- 導航：nav
- 主導航：mainbav
- 子導航：subnav
- 頂導航：topnav
- 邊導航：sidebar
- 左導航：leftsidebar
- 右導航：rightsidebar
- 菜單：menu
- 子菜單：submenu
- 標題: title
- 摘要: summary
(3)功能ui
- 標誌：logo
- 廣告：banner
- 登錄：login
- 登陸條：loginbar
- 註冊：regsiter
- 搜索：search
- 功能區：shop
- 標題：title
- 加入：joinus
- 狀態：status
- 按鈕：btn
- 滾動：scroll
- 標籤頁：tab
- 文章列表：list
- 提示信息：msg
- 當前的: current
- 小技巧：tips
- 圖標: icon
- 註釋：note
- 指南：guild
- 服務：service
- 熱點：hot
- 新聞：news
- 下載：download
- 投票：vote
- 合做夥伴：partner
- 友情連接：link
- 版權：copyright
class的命名：
(1)顏色:使用顏色的名稱或者16進制代碼,如spa
- .red { color: red; }
- .f60 { color: #f60; }
- .ff8600 { color: #ff8600; }
（2）字體大小,直接使用」font+字體大小」做爲名稱,如.net
- .font12px { font-size: 12px; }
- .font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標的英文名稱,如
- .left { float:left; }
- .bottom { float:bottom; }
(4)標題欄樣式,使用」類別+功能」的方式命名,如
- .barnews { }
- .barproduct { }
注意事項::
- 一概小寫;
- 儘可能用英文;
- 不加中槓和下劃線;
- 儘可能不縮寫，除非一看就明白的單詞.
- 主要的 master.css
- 模塊 module.css
- 基本共用 base.css
- 佈局，版面 layout.css
- 主題 themes.css
- 專欄 columns.css
- 文字 font.css
- 表單 forms.css
- 補丁 mend.css
- 打印 print.css