前端项目命名规范
文件命名：
- 项目命名全部以小写字母命名，以中划线分割。如
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 | 容器，包，一般用于最外层 |
