前端中的命名规范

今天在WebStorm中命名一个新的Vue项目时，提示"Project folder name should not contain capital letters"，明确告知我们不应该使用大写字母开头命名项目文件。

由于写前端不久，一直想整理出常用的前端命名规范，方便自己编写的时候查询规范。

1. 几种命名种类

目前收集到的常见的命名方式主要有以下4种：

驼峰命名法（camelCase）

首字母小写，从第二个单词开始首字母大写，例如：myProjectFolder

帕斯卡命名法（PascalCase）

也成为"大驼峰命名法"，每个单词的首字母都大写，例如：MyProjectFolder

连字符命名法（kebab-case）

每个单词之间使用连字符（-）连接，例如：my-project-folder

蛇形命名法（camelCase）

每个单词之间使用下划线连接，例如：my_project_folder

当然还有其它的不常见命名方式，例如：大写蛇形命名法 （一般用于常量命名，MAX_VALUE等），匈牙利命名法（在每个变量名的前面加上描述变量类型的前缀，strName等）。。。

首先要说，没有绝对的正确命名方式。不同的命名方式由使用该语言的社区群体来规定，使用哪种命名方式通常取决于团队的偏好、项目的要求以及所使用的编程语言的规范。

2. 前端大多数场景所使用的命名规范

HTML

HTML中主要分为以下几类
- 标签名：习惯上与实践上都推荐将标签名 全部小写 ，例如：<head>
  - 值得注意的是，HTML标签实际上是大小写不敏感的，使用大小写都是等效的，都会被浏览器解析成相应的标签
- 属性名：习惯上与实践上都推荐将属性名 全部小写 ，例如：autocapitalize
- 类名：此处放到 CSS 中一起分析
CSS

CSS中主要分为以下几类
- 属性：CSS中的声明体现为 属性:值 的形式，习惯上与实践上都推荐将属性名使用 连字符命名法（kebab-case） ，例如：sub-block等
  - 特别的，CSS中的属性在JavaScript中使用style方法调用的时候，其命名从 连字符命名法（kebab-case） 转化成 驼峰命名法（camelCase）
- 类：习惯上我们同样将类名使用 连字符命名法（kebab-case） 。然而，在实践中介绍一种称为BEM（Block Element Modifier）的类名命名规则。BEM是由Yandex团队提出的一种CSS命名规则，将页面的结构划分为 块（Blocks） 、元素（Elements） 和 修饰符（Modifiers） 3部分。
  - 在BEM命名规则中使用如下所示的命名：
  css 复制代码
```
/* 块（Blocks） */
.block {
  /* styles for the block */
}

/* 元素（Elements） */
.block__element {
  /* styles for the element */
}

/* 修饰符（Modifiers） */
.block--modifier {
  /* styles for the modifier */
}
```
  - 值得注意的是，这里所说的命名规范，不是指的本文中的4种常见命名方式，而是特指在CSS中，以一种具有标记意义的方式来命名类。甚至于，BEM和连字符命名法（kebab-case）还可以组合起来，例如：
  css 复制代码
```
/* 修饰符1 */
.block--modifier {
  /* styles for the modifier */
}
/* 修饰符2*/
.sub-block--modifier {
  /* styles for the modifier */
}
```
  从这个例子我们甚至可以猜想出，BEM使用 双连词符 ，可能是为了让你可以在命名 块（Blocks，其实就是CSS中的"最外层类"） 的时候，依然能够顺畅的使用 连字符命名法（kebab-case） 来命名。
  - 使用BEM具有极大的优点，相比普通的HTML层级中的类命名方式，BEM能够根据提供直观的层级关系，通过其名字就可以知道某个标记的含义，并且省去了使用层级选择器来约束作用域；当然，它的缺点就是命名方式长且难看，例如：
  css 复制代码
```
******普通的命名方式******
<div class="article">
    <div class="body">
        <button class="button-primary"></button>
        <button class="button-success"></button>
    </div>
</div>

******BEM的命名方式******
<div class="article">
    <div class="article__body">
        <button class="article__body__button-primary"></button>
        <button class="article__body__button-success"></button>
    </div>
</div>
```
JavaScript

JavaScript中主要分为以下几类（命名方法与Java语言类似）
- 变量：习惯上与实践上都推荐将变量使用 驼峰命名法（camelCase） ，例如：userName
  - 特别的，遇到命名中需要带上缩略词的，缩略词需要全部使用大写，剩余的其他单词依然采用 驼峰命名法（camelCase），例如HTMLElement、innerHTML
- 常量：这里不同于Java，使用const修改的常量实际上并不是真正的常量，而是用常量的概念来定义了一个变量，所以命名方式同样采用 驼峰命名法（camelCase） ，也可以在某些特殊意义下使用 大写蛇形命名法，例如：MAX_VALUE、API_URL
- 函数：习惯上与实践上都推荐将变量使用 驼峰命名法（camelCase） ，例如：getData()
- 方法：习惯上与实践上都推荐将变量使用 驼峰命名法（camelCase） ，例如：appendChild()
- 类：类是ES6引入的概念，习惯上与实践上都推荐将变量使用 帕斯卡命名法（PascalCase） ，例如：MyClass()
Vue.js

由于Vue.js是一个框架，因此框架中会出现一些不同于原生HTML、CSS、JavaScript中的命名方式
- 文件名：Vue在单文件组件中推荐使用 帕斯卡命名法（PascalCase） 来命名组件名，因为可以和原生的HTML做出区分，并且可以使用"/>"的方式来关闭标签；但是，在DOM中编写的模板（例如通过innerHTML方法插到页面中的），应该使用 连字符命名法（kebab-case） 来命名，并且必须使用"双标签（<></>）"来显式的关闭
  - 特别的，在单文件组件中，在 <template> 中使用注册的组件时，无论是使用 帕斯卡命名法（PascalCase） 还是 连字符命名法（kebab-case） 的形式都可以，Vue会自动处理命名转换，都转换成 帕斯卡命名法（PascalCase） 形式。（总之，推荐文件名都使用 连字符命名法（kebab-case） 形式，在 <template> 中使用时用 帕斯卡命名法（PascalCase） 方式）
- 组件名：如上所示，在注册组件时使用 帕斯卡命名法（PascalCase） 来注册
- props中的名称：通常情况下，父组件向子组件传递的属性名为 连字符命名法（kebab-case） 形式，子组件使用 props 接收的属性名为 驼峰命名法（camelCase） 形式，例如：
  Js 复制代码
```
// 父组件向子组件传递user-name属性
<FatherComponent user-name="John"/>

// 子组件使用props接收属性名
props: ['userName']
```
- 组件事件命名（$emit()）：习惯上与实践上都使用 连字符命名法（kebab-case） 形式，并且应该以动词结尾，例如：dialog-open

3. 额外话题

回到最开始的问题：为什么文件名不推荐使用大写?个人认为有以下几点原因：

跨平台兼容性：在Windows系统上，文件名通常是不区分大小写的，而在像Linux和macOS这样的Unix系统上，文件名通常是区分大小写的。为了确保跨平台的兼容性，通常建议使用小写文件名。
可读性：写文件名更易读，特别是当多个单词组成文件名时，使用小写并使用短横线或下划线分隔单词可以提高可读性。
URL一致性：在Web开发中，URL经常用于引用文件，Web服务器和浏览器通常对URL中的大小写敏感。使用小写文件名可以避免由于URL大小写不一致而导致的链接问题。
兼容版本控制软件：例如git等版本控制软件处理文件名时也是区分大小写的，统一使用小写文件名可以防止由于不同平台或版本控制系统导致的混淆和错误。

目前对于命名规范就想到这么多，有忽略的知识点，请大家指正，我也会在后续及时添加上！