命名规范是每个团队都必须面临的问题，用固定的规范可以使得开发的效率得到提升、在交接和维护项目时降低投入的成本。在执行规范的同时，我们应该避免以下的命名现象出现：
- 使用无意义的数字
- 使用英文缩写
- 使用拼音
- 同一项目当中混用多种命名规范
以上的编码习惯无疑会使得代码维护起来的难度加大，在为文件、标识符进行命名的时候应尽量考虑语义化，使下一个开发者能够快速理解它们的含义（强调一点，许多人认为命名过长会使得阅读难度加大，但是相比容易阅读但是无法理解的缩写形式，开发者们其实更愿意接受语意明确的长命名）。
目录/文件
常规的文件夹/文件命名使用全小写形式，单词之间使用下划线 _ 连接：home、activity_list
组件文件夹/文件命名使用大驼峰形式（名词）：Coupon、CouponList
Tip：在React、Vue中我们将页面文件也理解为页面级组件，所以请使用大驼峰的形式命名。
图片
图片需要先为对应的业务性质创建文件夹进行存放，文件夹有效的避免同名文件冲突的问题，文件命名由两部分组成：性质_名称，当某一部分需要使用复合单词时，复合单词之间只用**横杠 - **连接
- 图标类型：
images/icon/icon_tipsimages/icon/icon_checked - 公共类型：
images/common/banner_news - 活动类型：
images/activity/banner_news
JavaScript
常量命名以全大写形式，单词之间以下划线 _ 连接：MAX_VALUE
标识符(变量、函数)命名使用小驼峰形式：car、carSeries、getUserInfo
私有变量命名使用小驼峰形式，单词以**下划线 _ **开头：_time
类命名使用大驼峰形式：Person
Css
样式的命名我们采用业界赞誉甚佳的 BEM 规则，何为 BEM 呢？
- B：Block 代表块的意思，我们可以理解为视觉观感上的一个整体或是功能独立的部件就称为一个块。
- E：Element 代表元素的意思，是被功能独立的块所包裹的元素。
- M：Modifier代表修饰符的意思，它是为了给相同的元素附加属性而存在的。
规则：我们使用双下划线 __ 连接B与E，用双横杠 -- 连接E与M，如果某一个部分是复合单词则单词之间以横杠 - 连接。
.nav
.nav__item
.nav__item--hover
# 复合单词
.sub-nav
.sub-nav__item
.sub-nav__item--hover
常规的修饰符
| 激活的 | active | 前一个 | previous |
|---|---|---|---|
| 选中的 | selected | 后一个 | next |
| 默认的 | default | 当前 | current |
| 反转的 | toggle | 显示 | show |
| 禁用的 | disabled | 隐藏 | hide |
| 危险的 | danger | 打开的 | open |
| 警告的 | warning | 关闭的 | close |
| 错误的 | error | 大 | lg |
| 成功的 | success | 小 | sm |
| 信息 | info | 特小 | xs |
常犯的错误
1、BEM 命名的规则讲究的是扁平化，而不是按着DOM的层级一直串街命名，所以请不要出现B__E__E__E的情况，每个独立的命名永远都是由B__E--M三级组成的。
2、块的内部允许存在其他的块（B），不要因为有包含关系就把所有DOM认定为元素（E），只要功能完整可以迁移到任何位置我们都可以认为它是一个新的块。这个示例可能不是特别准确，旨在让大家理解包裹关系不一定就需要强制应用 B__E 的规则，如果包裹就意味着 B__E 的话，当某天有一部分需要移动位置时就非常困难，对块的认知我们最好以功能最小并且独立为原则去划分。
