前端命名規範

 

1、命名規範：

一、基本要求：

1）文件編碼統一使用 UTF-8 編碼； 
2）命名時以符合語義爲主要參考指標，CSS屬性書寫規範，採用統一風格及命名方法； 
3）結構清晰，層級關係明朗，以不超過三級爲標準； 
4）同一表現形式的樣式要求可重複利用，模塊組件類的樣式要求可總體外部移植； 
5）編寫 CSS 的時候，應當避免使用CSS Hack，能不用則不用。 
6）全部頁面默認都針對Firefox 等最接近標準的瀏覽器進行設計，而後使用IE 特有條件註釋功能進行鍼對性修正。 
7）請使用英文進行命名，儘可能避免使用拼音。命名要求具備可讀性，儘可能避免使用縮寫。命名雖然容許數字，但應儘可能避免使用數字命名。 

二、命名方法 要求採用統一的命名方法。經常使用命名方法有： 
1）連寫式命名法，如：helloworld 
2）中線命名法，如：hello-world（目前採用此方法的較多，建議採用） 
3）下劃線命名法，如：hello_world 
4）駱駝命名法，如：helloWorld 
5）帕斯卡命名法，如：HelloWorld 
6）其餘方法。 

三、css文件命名規範 如： 
全局的：global.css； 
主要的：master.css； 
佈局、版面：layout.css； 
專欄：columns.css； 
文字：font.css； 
打印樣式：print.css； 
主題：themes.css； 
補丁：pacth.css； 
格式化瀏覽器：base.css等。 

四、ID及Class命名經常使用名稱 
(1)頁面結構
- 容器: 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)功能
- 標誌：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

 

五、路由示例：

分類列表：category

添加分類：category/create

分類詳情：category/:id/show

編輯分類：category/:id/edit

:id分類下的品牌列表：category/:id/brand

:id分類下品牌詳情：category/:id/brand/:brand_id

:id分類下的品牌編輯: category/:id/brancd/:brand_id/edit

如須要區分分組，可加前綴

例如：用戶下的分類

user/category

......

component文件命名同理，

分類列表：category/index

添加分類：category/create

分類詳情：category/show

編輯分類：category/edit

:id分類下的品牌列表：category/brand/index

:id分類下品牌詳情：category/brand/show

:id分類下的品牌編輯: category/brancd/edit

以此類推。