前端规范

命名规范

四种基本的编程命名规范

驼峰式命名：第一个单词首字母小写，后面其他单词首字母大写。

匈牙利命名：前缀字母用变量类型的缩写，其余部分用变量的英文或英文的缩写，单词第一个字母大写。

帕斯卡命名法：又叫大驼峰式命名法。每个单词的第一个字母都大写。

下划线命名法：以字母开头，单词全部采用小写方式，以下划线分隔。

一般命名规则

命名规则没有谁对谁错，在项目中保持一致才是关键。

文件夹中/文件名：下划线命名法，如，my_project_name。

**图片命名：**下划线命名法，如，[e-mail]。

图片功能：icon | logo | btn | bg | cont

模块名称： list | info | avatar

图片精度： @1x | @2x | @3x

**CSS选择器命名：**下划线命名法。

• 下划线命名法，应该尽量精短、明确，

• 在子孙模块数量可预测的情况下，严格继承祖先模块的命名前缀。当子孙模块超过4级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块

• 常用命名推荐

type	name
文字	description、info、information、details、feature、msg、message、txt、text、tips、title、
图片	avatar、logo、arrow、thumbnail
标签	bar、btn、branding、links、more、nav、navigation、pop、popup、nub、promotion、subscribe、summary、crumb、breadcrumbs、category、col、column
功能类	clearfix、copyright、comment、forum、help、login、logout、menu、pagination、output、preview、progress、reg、register、save、search、share、show、sort、submit
容器	container、wrap、wrapper、module
内容	content、slide、main、body、section
状态	current、disabled、active、error、fail、default、hightlight、fewer、hide、off、on、selected、checked、success
层级	primary、secondary、sub
序列	even、odd、first、last、previous、next

下划线还是中划线命名？

文件名首先肯定不能使用空格，然后一般在中划线（或称连字符） - 和下划线 _ 中做选择。

文件是否需要被搜索引擎搜索

通常公布到网络时文件名作为 URL 的一部分。

然而 Google 搜索引擎会将 _ 连接的单词作为一个单词。比如：搜索 web_site 实际上只会找关键词 website；而 web-site 会分为 web 和 site 来查找。即：

• This_is_a_single_word

• This-is-a-sentence-with-multiple-words

所以这是个 SEO 问题。如果要考虑到搜索引擎，那么就用 -。

注：过去，Google 不会将下划线视为单词分隔符，但现在可以了。

文件名能否被环境解析

比如 Java、Python、Go 语言：

命名源文件和目录不可以用连字符，否则不能被 Python 或 Java import，因为他们要求目录和文件名都是像变量名那样的标识符。命名变量当然也不可以用连字符。所以其实是统一的。

这就是为什么 Go 语言的 import 要用字符串 “fmt” 的原因了。

对于 Java，这进一步影响了公司的域名。例如 com.chenshuo.rpc 是合法的 package 名字，但是 com.china-pub.rpc 和 com.163.rpc 就不合法了。再引申一下，如果目录名是域名的一部分，恐怕也应该避免下划线，因为域名里通常没有下划线。

LaTeX 的源文件（包括图片）不要有下划线，否则 include 会出错。

英文文法

如果既不需要关心搜索引擎，也不需要关心编程语言环境的问题。那么就考虑英文文法。 连字符在英文里是有意义的，比如复合词：

upper-case letter
non-English-speaking peoples
the post–World War II years
a hospital–nursing home connection
a nursing home–home care policy
a quasi-public–quasi-judicial body

为了保留连字符在复合词的作用，那么文件命名时，就应该使用下划线来代替空格。

推荐

个人推荐文件名、CSS 选择器等使用下划线连接。原因：

• 更符合编程语言中变量的命名规范。在某些情况下可能需要以变量形式访问命名。比如：React 常以这种方式使用选择器：

  import styles from './index.less'
  <div className={styles.acticle_body}></div>

• 用下划线连接的词，双击鼠标可以直接选择所有单词；

• 正则表达式： /w 表示单词字符，包括 a-z、A-Z、0-9，以及下划线。