文件命名：
- 項目命名全部以小寫字母命名，以中划線分割。如
my-project。 - 目錄命名全部以小駝峰命名法，除第一個單詞之外，其他單詞首字母大寫。如
myDir。 - JS/TS 文件以小寫字母命名，多個單詞以下划線連接，例如
util.js、util_helper.js。 - HTML/CSS文件命名，確保文件命名總是以字母開頭而不是數字，且字母一律小寫，以中划線連接且不帶其他標點符號。如
my_page.html、my_page.css。 - 組件文件命名遵循 Pascal 命名法（大駝峰），例如
AddressPicker.vue。
圖片命名：
命名順序
全部以小寫字母命名，多個單詞以下划線連接。
圖片命名建議以以下順序命名：
圖片業務（可選） + 圖片功能類別（必選）+ 圖片功能名稱（可選） + 圖片精度（可選）
-
圖片業務：
- oe_：在線教育
- jp_：教培
- bt_：碑帖
-
圖片功能類別：
- logo：LOGO類
- icon_：模塊類固化的圖標
- btn_：按鈕
- bg_：可平鋪或者大背景
- …
-
圖片模塊名稱：
- course：課程
- avatar：用戶頭像
- …
-
圖片精度：
- 普清：@1x
- Retina：@2x | @3x
ClassName命名
ClassName的命名應該盡量精短、明確，必須以字母開頭命名，且全部字母為小寫，單詞之間統一使用中划線 “-” 連接
命名原則
- 基於姓氏命名法（繼承 + 外來），如下圖：
-
說明
-
在子孫模塊數量可預測的情況下，繼承祖先模塊的命名前綴。
如:
<div class="course"> <div class="course-img"> </div> <div class="course-option"> </div> </div>
-
-
當子孫模塊超過4級或以上的情況下，可以考慮在祖先模塊內具有識辨性的獨立縮寫作為新的子孫模塊。
如：
<div class="course"> <div class="course-img"> <div class="course-img-ul"> <div class="course-img-ul-info"> <!-- 這個時候 ciui 為 canner-img-ul-info 首字母縮寫--> <div class="ciui-txt"></div> </div> </div> </div> <div class="course-option"> </div> </div>
常用命名推薦
注意： ad、banner、gg、guanggao 等有機會和廣告掛勾的字眠不建議直接用來做ClassName，因為有些瀏覽器插件（Chrome的廣告攔截插件等）會直接過濾這些類名，如：
<div class="ad"></div> 因此這種廣告的英文或拼音類名不應該出現。
另外，敏感不和諧字眼也不應該出現，如：
<div class="fuck"></div> | ClassName | 含義 |
|---|---|
| about | 關於 |
| account | 賬戶 |
| arrow | 箭頭圖標 |
| article | 文章 |
| aside | 邊欄 |
| audio | 音頻 |
| avatar | 頭像 |
| bg,background | 背景 |
| bar | 欄（工具類） |
| branding | 品牌化 |
| crumb,breadcrumbs | 面包屑 |
| btn,button | 按鈕 |
| caption | 標題，說明 |
| category | 分類 |
| chart | 圖表 |
| clearfix | 清除浮動 |
| close | 關閉 |
| col,column | 列 |
| comment | 評論 |
| community | 社區 |
| container | 容器 |
| content | 內容 |
| copyright | 版權 |
| current | 當前態，選中態 |
| default | 默認 |
| description | 描述 |
| details | 細節 |
| disabled | 不可用 |
| entry | 文章，博文 |
| error | 錯誤 |
| even | 偶數，常用於多行列表或表格中 |
| fail | 失敗（提示） |
| feature | 專題 |
| fewer | 收起 |
| field | 用於表單的輸入區域 |
| figure | 圖 |
| filter | 篩選 |
| first | 第一個，常用於列表中 |
| footer | 頁腳 |
| forum | 論壇 |
| gallery | 畫廊 |
| group | 模塊，清除浮動 |
| header | 頁頭 |
| help | 幫助 |
| hide | 隱藏 |
| hightlight | 高亮 |
| home | 主頁 |
| icon | 圖標 |
| info,information | 信息 |
| last | 最后一個，常用於列表中 |
| links | 鏈接 |
| login | 登錄 |
| logout | 退出 |
| logo | 標志 |
| main | 主體 |
| menu | 菜單 |
| meta | 作者、更新時間等信息欄，一般位於標題之下 |
| module | 模塊 |
| more | 更多（展開） |
| msg,message | 消息 |
| nav,navigation | 導航 |
| next | 下一頁 |
| nub | 小塊 |
| odd | 奇數，常用於多行列表或表格中 |
| off | 鼠標離開 |
| on | 鼠標移過 |
| output | 輸出 |
| pagination | 分頁 |
| pop,popup | 彈窗 |
| preview | 預覽 |
| previous | 上一頁 |
| primary | 主要 |
| progress | 進度條 |
| promotion | 促銷 |
| rcommd,recommendations | 推薦 |
| reg,register | 注冊 |
| save | 保存 |
| search | 搜索 |
| secondary | 次要 |
| section | 區塊 |
| selected | 已選 |
| share | 分享 |
| show | 顯示 |
| sidebar | 邊欄，側欄 |
| slide | 幻燈片，圖片切換 |
| sort | 排序 |
| sub | 次級的，子級的 |
| submit | 提交 |
| subscribe | 訂閱 |
| subtitle | 副標題 |
| success | 成功（提示） |
| summary | 摘要 |
| tab | 標簽頁 |
| table | 表格 |
| txt,text | 文本 |
| thumbnail | 縮略圖 |
| time | 時間 |
| tips | 提示 |
| title | 標題 |
| video | 視頻 |
| wrap | 容器，包，一般用於最外層 |
| wrapper | 容器，包，一般用於最外層 |