优秀的代码往往是最通俗易懂的代码，在于它的易于维护。在开发过程中，变量/方法优秀的命名往往有助于理解该变量/方法的用途，起到命名即注释的作用。而糟糕的命名往往会让人摸不着头脑。为了提高代码的可维护性，我们需要更优雅的命名方式。

一、通用规则

1. 有意义

起一个有意义的变量名这条相信绝大多数开发者都能做到，即变量名有实际的指代意义，在此不再赘述。

2. 指代具体

命名时需要使其更加具体详尽，可以具体到所在的模块，或者能表达出其逻辑/功能。

/* bad */
.title {}
/* good */
.head-title {}

// bad
const info;
// good
const userInfo;

3. 遵循传统

无论是CSS、JavaScript、还是文件的命名，都有一些约定俗成的惯例和规范，我们只需遵循即可。

4. 约定规范

命名的规则有很多种，没有高低之分，只有相对合适，没有绝对完美的规则。通常为了维持项目的风格统一，通常在一个项目中，相同种类的规则只选取一种。毕竟规范也只是一种工具，运用规范的根本目的是为了更好的开发和维护，太过复杂的规范反而会阻碍正常开发。因之，在项目启动前，在技术栈选取后就应当进行规范的约定，这个过程是团队意见的整合，毕竟规范是要靠团队成员的相互配合。

二、CSS 中的命名

1. 划分原则

CSS中的类名根据其职责可以分为公共类名和自定义类名。其中公共类名又可以分为常见类名（一般是约定俗成）和工具类名。

2. 常见类名

3. 自定义类名

自定义类名一般以短横线“-”或者下划线“_”中的一种作为单词间分割，通常不使用驼峰命名，以此区别于变量。在项目中通常使用 scss、less 来进行样式书写，大大降低了类名重复引发的样式问题。因此我们只需要关注一个模块的外层容器类名。通常采用 模块名称-修饰名称 的命名方式。

三、JavaScript 中的命名

1. 命名规则

1.1 小驼峰式命名(lower camel case)

第一个单词以小写字母开始，第二个单词的首字母大写。例如：firstName、lastName。一般的变量、函数均采用小驼峰式命名。

1.2 大驼峰式命名(upper camel case)

每一个单词的首字母都采用大写字母，例如：FirstName、LastName，也被称为 Pascal 命名法。一般类采用大驼峰式命名。

1.3 全大写式命名

常量通常采用全大写式命名，单词间以下划线“_”分割。

1.4 以下划线开头式命名

一般情况下，局部变量或者私有变量采用下划线开头，后跟驼峰式命名。

2. 命名单词选择

一般情况下，变量/函数的命名采用动词前缀+名词修饰。