.前言

如果说计算机科学只存在两个难题：缓存失效和命名。那么我就觉得命名的难点只有两个：词汇量和坚持贯彻执行制定的规范。

最近在知乎上看到这个：作为程序员，有没有让你感到既无语又崩溃的程序命名？。顿时感慨万千，因为命名对于程序员来说是就是一个难题，有时候因为命名，可能会引起别人的误导，疑惑等，对开发效率，项目的质量影响可大可小。今天，也分享下最近自己在使用的命名习惯，当然只是个人习惯。更希望能在评论区看到大家推荐的命名方式，互相学习，交流。

关于整篇内容，主要提及两个：

1.如何写出让别人容易读懂的命名

2.针对不同的对象，使用对象命名的格式

2.盘点那些难以读懂的命名

首先，先盘点下有哪些命名的一些方式是很难让别人读懂的。这些情况，大家看到就应该在开发上尽量避免下。

2-1.单词拼写错误

举个例子

//提交表单（把 Form 写成了 From ）
submitFrom(){...}

之前写文章也有说过，单词拼写正确可以说是一个底线了。如果单词拼写错误，比如 from 和 form 都是正确的单词，但完全不一样的意思，如果把 from 写成 form ，以后读代码的人（也可能是你自己），很有可能会懵逼。

2-2.中英文混用

单词拼写错误会误导别人，中英文混用这个命名方式就可以说让人云里雾里的感觉，不会误导，只会看不懂。

比如下面

let chanpinList=[];

这个变量名，一开始不知道是什么，注释也没有，完全懵逼。后来看了需求，才知道这个的意思是：产品列表。

2-3.以1-9，a-z命名

这个情况相信大家都会遇到过，比如页面上有几个按钮，有人命名成 btn1，btn2，btn3，btn4…。或者 btnA，btnB，btnC，btnD。这样的命名看似简单，但实际上从这些命名里面读取不到任何信息，以后会可能会痛苦些。

2-4.混用命名格式

这个可以说没那么可恨，但是看着就别扭，比如表示评论列表，有地方这样命名：comments，另一个地方这样命名： comment-list，还有这样命名： commentList。几种规范混在一起，就感觉不规范了。

还用一种虽然一般不会出现的情况，也遇见了。比如一个地方有添加供应商的按钮，命名是：addSupplier 。在另一个地方也有相同的功能按钮，完全一样，结果命名是：addSupplierInfo 。当时就以为这两个不是同一个功能，造成了误会。

2-5.强制中文拼音命名

有些名词，被中国人创造出来（淘宝-taobao，微博-weibo），没有英文翻译的。就可以用中文拼音命名，其他的都建议用英文。

但是偏偏有时候就算有英文的单词，有些人还是用中文拼音命名，比如一个文章列表，很多人就是没用 articleList，直接写 wenzhangliebiao。但是看的时候，一定会懵逼一会。

2-6.强制简写

简介虽然可以让命名看着更加的简洁，但是有时却会遇上强制简写的命名，比如一个函数是提交用户评论信息的功能。原本以为是：handleCommentSubmit/submitComment/publishComment。结果后来一看–tjyhpl。强制简写还是用拼音的简写，后来让他改一下，改成了ac。后来一问才知道他想表达的意思是 addComment ，当时差点动手了。

2-7.单复数不分

这个情况不算恶劣，只算是一种规范吧，之前有分别有两个操作函数，一个是下载全部订单数据，一个是下载当前订单数据。但是两个函数的命名，一个是downloadOrderData，另一个是downloadOrder。这样也产生了一点懵逼感。

面对这样的情况，建议还是区分下单复数，downloadOrder，downloadOrderAll/downloadOrderList。区分了单复数的命名，如果有返回值，也可以让别人大概知道，单数可能就是返回单个记录，复数可能返回一个数组。

2-8.正反义词错用

这个情况同上，不算是恶劣，只能算是不规范。比如：分别有两个操作函数一个是显示弹窗，一个是关闭弹窗。结果命名上面，一个是 showEditDialog 。另一个是 closeEditDialog 。

上面的案例，show 和 close ，一个是显示，一个是关闭，显然不是正反义词。应该出现的姿势是，showEditDialog 和 hideEditDialog ，或者 openEditDialog 和 closeEditDialog

2-9.为所欲为的命名

还有其它的搞笑命名，在知乎上面看到的情况，别人遇到的情况。大家移步到知乎吧，这个不重复太多。

作为程序员，有没有让你感到既无语又崩溃的程序命名？。

3.命名相关格式

说完了命名第一个，命名单词应该正确的书写之后。再来说下命名的相关格式在说自己的命名实例之前，先说下不同的命名对象，命名方式是不一样的。具体如下：

待命名对象推荐名称图片小写字母，‘-’或者‘_’ 分割css（class,id）‘-’ 分割文件，变量小驼峰命名js类（class）大驼峰命名常量大写字母，‘_’ 分割临时变量，私有变量‘_’ 开头，驼峰命名

4.HTML命名

在说命名 HTML 命名之前，先说下布局的三个概念：模块( module )和元件( unit )

模块：各种常见的网页内容模块，通常可以重复使用的较大的整体，比如导航、菜单、幻灯、图文列表等。命名前面建议带有 m-

元件：各种常见的网页内容元件，比如按钮、标题、输入框等。命名前面建议带有 u-

两者关系，模块包含元件，元件组成模块。

小小实例

看到上面的一个小弹窗。整个弹窗，当成一个模块。可以把标题，提示内容，按钮当做元件。HTML 代码就如下，CSS , JS 代码就不贴了。模块就带 m- ，元件就带 u-

<div class="m-alert">
 <div class="m-box">
 <div class="m-box-inner">
 <div class="u-title">提示2</div>
 <div class="u-content">这里是提示内容2</div>
 </div>
 <div class="m-box-buttons">
 <span class="u-btn-success">确定</span>
 </div>
 </div>
</div>

至于这样的写法有什么优劣，注意事项，这里就不展开讲了，以后再写文章。

5.JavaScript命名

在js命名里面，应该只有四种命名方式：小驼峰(productList)，大驼峰(ProductList)，大写字符，下划线分割（PRODUCT_LIST），下划线开头+小驼峰(_productList)

5-1.按照类型命名

5-1-1.小驼峰

在js写法里面，小驼峰命名应该是最多的一种。变量，函数一般而言都是使用小驼峰命名。

//登录处理函数
let handleLogin=function(){}

5-1-2.大驼峰

在es6之前，js还没有class的概念，但是也组织不了开发者模拟class。现在有了class，自然而然，class的命名规范就更离不开了。关于class的命名规范，应该很多人都是习惯用大驼峰命名。

//创建一个类
class Person{
 //...
}

5-1-3.常量

常量建议还是使用大写字符+下划线命名。

//配置最大金额
const PRICE_MAX=10000;

5-1-4.私有变量

私有变量相对于外面作用域而言，为了区分变量是公用的，还是私有的。建议命名上面就做下区分，私有变量建议使用下划线开头+小驼峰命名方式。

let myObj={
 name:'守候',
 setName(){
 //保存当前的this
 let _this=this;
 setTimeOut(function(){
 alert(_this.name)
 },1000)
 }
}

5-2.按职责命名

函数命名，一般都是动词开头。

5-2-1.获取值

如果函数是为了获取值(函数最后会返回一个值的)，函数前面建议带有get。

//根据 ID 获取用户信息
function getUserInfo(id){
 
}

5-2-2.设置值

如果函数是为了设置值(函数最后会返回一个值的)，函数执行就是为了给某一个变量赋值，函数前面建议带有set。

//设置用户信息
function setUserInfo(){
 
}

5-2-3.处理动作

如果函数是为了处理一些操作，比如登录，注册，渲染列表等。那么就建议命名前面带有handle。

//分页操作
handleChangeCurrent(val){
 
}
//注册操作
handleRegister(){
 
}

这个处理动作，有些开发者也是习惯直接以动作开始。openDialog，closeDialog等。

6.目录，文件，图片命名

6-1目录，文件名称的命名规则

统一小驼峰命名法。

如下例子：

目录，文件建议命名首页index，index.html搜索页面search，search.html产品列表productList，productList.html产品详细页面productDetail，productDetail.html新闻列表newslist，newslist.html新闻详细页面newsdetail，newsdetail.html评论列表commentList，commentList.html关于我们about，about.html

如果发现名称过长，可以在团队约定好简写格式：比如 product 简写成 pro 。

6-2图片命名规范

如果是通用性质的图片，例如LOGO，菜单，侧边栏，背景等，就直接使用小写字母命名。比如：logo.jpg ，menu.jpg，aside.jpg，bg.jpg。

如果不是通用的图片，就建议根据类别-模块-功能的格式。使用小写字母，‘-’或者‘_’分割，如下例子：

图片名称意义btn-submit-comment.jpg提交评论的按钮bg-product-list.jpg产品列表模块的背景icon-views.png浏览数的图标icon-btn-vote.png投票按钮ad-news-aside.jpg在新闻侧边栏的广告图片

7.参考资料

一些前端书写规范建议

关于团队合作的css命名规范

8.小结

关于命名，很简单，也很难。也是困扰着很多的开发者，包括我。该文章的命名方式，也是我在用的一种个人命名方式，希望能让大家有所收获。当然其中还有很多的瑕疵，希望大家多多指点，或者推荐下自己建议的命名方式。

关于命名的规范，每个公司都有自己的编码规范，只是很少公司能认真贯彻执行自己的规范，从而导致命名错乱。所以命名的难点，我不认为是命名本身有难度，难度在于在项目上，面对各种需要命名的对象，坚持使用一套命名格式，正确的命每一个名。

作者：守候i

链接：http://www.imooc.com/article/243505

击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

关于CSS命名，有人私问过我，说有时候会出现命名很纠结的情况，class命名感觉就非常乱，有时自己都看不下去了，分不清楚了。

其实写出一套优雅的CSS代码也是一个合格的前端开发人员基本的且重要素质。今天，我就来谈谈我平时是怎么命名CSS的。希望对大家有借鉴作用。

从四个方面，来总结一下：

一、分类处理样式

心中一定要将CSS进行一个分类，不管是小项目还是大项目都希望这样处理。

1、布局（grid）: 我们将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等。常用！

2、模块（module）：即语义化的可以重复使用的较大的整体。如导航、登陆、注册、列表、评论、搜索等。常用！

3、元件（unit）：通常是一个不可再分的较为小巧的个体，被重复用于各种模块中，比如按钮、输入框、loading、图表等。常用！

4、功能（function）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动。不常用，不可滥用！

5、皮肤（skin）：对于换肤型网站需要使用，将皮肤型的样式抽离出来，非换肤型网站不可滥用，不常用。

二、遵循一套命名规则

使用类选择器，放弃ID选择器。因为ID在一个页面中的唯一性导致了如果以ID为选择器来写css，就无法重用，而class而优势在于复用性，而且私有度也并不高。因此，我一般情况下会选择在HTML中的ID用于JavaScript，但是在CSS里只用class，一个ID也不用。这样做实际上也是将表现和行为分开，而不是混在一起。

class命名：使用单个字母（分类首字母）+"-"为前缀。

比如：对于header部分，我们可以这样写：

注意1：在css中，样式的选择器总是要以上面的 .g- .m- .u- .f- .s-这五类开头，然后再里面使用后代选择器。

注意2：这并不是说所有的className都需要加这些前缀，对于一些不属于这几种的元素，我们完全可以不加前缀，作为后代选择器使用。

那么如何使用后代选择器呢？注意三点

1、我们约定不以单个字母+“-”为前缀且长度大于等于2的类选择器为后代选择器。

如：.g-date .u-right_arrow{ float: right;} 这个就是不合适的，我们直接写成 .u-right_arrow{ float: right;}即可。

2、一个语义化的标签也可以是后代选择器。

比如.m-list li{}，而不是用.m-list div{}。

3、尽量简约而不失语义

如.m-abc这种完全没有语义，不知道要表达什么，对于相同语义的不同命名，我们可以直接加数字或字母区分即可（如.m-list1、.m-list2,都是列表模块，都通加数字即表示不同的列表模块）。

三、注意一些代码格式

1、选择器、属性和值都用小写

这一点非常关键：根据xhtml规范，所有的标签属性和值都要使用小写形式，而我们知道xhtml更为标准，所以最好遵循之，这样，选择器必须小写就是十分必要的了。既然这样我们就不能使用驼峰式写法来写类名了，如class="u-leftArrow"实际上就是不规范的了，最好写成class="u-left_arrow"，也可以表达相同的意思。

2、省略值为0的单位

这样可以节省不必要的字节同时也为了方便阅读，我们将0px、0em、0%等都缩写为0。如下所示：

3、使用16进制表示颜色值，其中的字母使用大写形式，并尽量缩写

除非在你需要透明度而使用rgba，否则都是用#FFFFFF这样的写法，并尽量缩写，如#FFF。使用大写形式，是因为这样更加具有易读性，且有利于压缩，而缩写为了减少不必要的字节。

4、关于属性的书写顺序

这一点可能也是大家比较纠结的一个问题，大部分起初阶段也是乱写，甚至根本没注意这个问题。

根据属性的重要性顺序来书写。即先书写定位布局类属性，在书写盒模型等自身属性，最后书写文本类及修饰类属性。

另外，如果属性间存在关联性，则不要隔开来写。如下代码所示：

其中的height和line-height具有关联性，尽量不要分开写。

5、私有在前，标准在后

先写带有浏览器私有标志的属性，后写W3C标准的属性。因为私有的属性，说明浏览器自身还没有规范化，标准属性是用不了的。若某一天该浏览器的属性规范化了，那么说明标准属性可以使用了，而如果我们先写W3C标准属性，最后写私有属性，就有可能导致私有属性覆盖标准属性。因此私有在前，标准在后的写法是考虑到了以后可能会出现的问题。

其它一些减小CSS文件大小，可以缩写的尽量采用缩写形式等大家注意一下就行了。下面将一些常用的类选择器命名列一下。供大家参考。

四、通常的类选择器如何命名

前面我说过，命名className时，应当以其作用、功能来命名。要有语义化，下面从五个分类出发，列一些通常命名的名字。供参考

1、对于布局，即用.g-作为前缀，通常有以下推荐的写法。

头部： header或head

主体： body

尾部：footer或foot

主栏： main

侧栏：side

盒容器： wrap或box

主栏子容器：mainc

侧栏子容器：sidec

2、对于模块，即.m-作为前缀。元件，.u-作为前缀，通常有下面推荐的写法。

导航： nav

子导航：subnav

菜单：menu

选项卡：tab

标题区：head或title

内容区：body或content

列表：list

表格：table

表单：form

排行：top

热点：hot

登录：login

标志：logo

广告：adervertise

搜索：search

幻灯：slide

帮助：help

新闻：news

下载：download

注册：register或regist

投票：vote

版权:copyright

结果：result

按钮：button

输入：input

3、对于功能，即以.f-为前缀，通常推荐如下：

清除浮动：clearboth

向左浮动：floatleft

向右浮动: floatright

溢出隐藏：overflowhidden 　

4、对于颜色，即以.s-为前缀，通常推荐如下：

字体颜色：fontcolor

背景：background

背景颜色：backgroundcolor

背景图片：backgroundimage

背景定位：backgroundposition

边框颜色：bordercolor

5、对于状态，即以.z-为前缀，通常推荐如下：

选中:selected

当前：current

显示：show

隐藏：hide

打开：open

关闭:close

出错：error

不可用:disabled

最后总结一下：

说一下CSS选择器使用的注意事项：

1、.m-xxx div{}这种无主义不可取，且会造成大面积污染。

2、.g-zzz .m-xxx{}不可取，类别的选择器的后代选择中不应当包括类别选择器。

3、不要将选择器定的过于冗长，因为选择器的结构越复杂，浏览器的消耗就越大，一般建议在3个长度之内写完。