.前言

如果說計(jì)算機(jī)科學(xué)只存在兩個(gè)難題：緩存失效和命名。那么我就覺得命名的難點(diǎn)只有兩個(gè)：詞匯量和堅(jiān)持貫徹執(zhí)行制定的規(guī)范。

最近在知乎上看到這個(gè)：作為程序員，有沒有讓你感到既無語又崩潰的程序命名？。頓時(shí)感慨萬千，因?yàn)槊麑?duì)于程序員來說是就是一個(gè)難題，有時(shí)候因?yàn)槊赡軙?huì)引起別人的誤導(dǎo)，疑惑等，對(duì)開發(fā)效率，項(xiàng)目的質(zhì)量影響可大可小。今天，也分享下最近自己在使用的命名習(xí)慣，當(dāng)然只是個(gè)人習(xí)慣。更希望能在評(píng)論區(qū)看到大家推薦的命名方式，互相學(xué)習(xí)，交流。

關(guān)于整篇內(nèi)容，主要提及兩個(gè)：

1.如何寫出讓別人容易讀懂的命名

2.針對(duì)不同的對(duì)象，使用對(duì)象命名的格式

2.盤點(diǎn)那些難以讀懂的命名

首先，先盤點(diǎn)下有哪些命名的一些方式是很難讓別人讀懂的。這些情況，大家看到就應(yīng)該在開發(fā)上盡量避免下。

2-1.單詞拼寫錯(cuò)誤

舉個(gè)例子

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

之前寫文章也有說過，單詞拼寫正確可以說是一個(gè)底線了。如果單詞拼寫錯(cuò)誤，比如 from 和 form 都是正確的單詞，但完全不一樣的意思，如果把 from 寫成 form ，以后讀代碼的人（也可能是你自己），很有可能會(huì)懵逼。

2-2.中英文混用

單詞拼寫錯(cuò)誤會(huì)誤導(dǎo)別人，中英文混用這個(gè)命名方式就可以說讓人云里霧里的感覺，不會(huì)誤導(dǎo)，只會(huì)看不懂。

比如下面

let chanpinList=[];

這個(gè)變量名，一開始不知道是什么，注釋也沒有，完全懵逼。后來看了需求，才知道這個(gè)的意思是：產(chǎn)品列表。

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

這個(gè)情況相信大家都會(huì)遇到過，比如頁面上有幾個(gè)按鈕，有人命名成 btn1，btn2，btn3，btn4…。或者 btnA，btnB，btnC，btnD。這樣的命名看似簡單，但實(shí)際上從這些命名里面讀取不到任何信息，以后會(huì)可能會(huì)痛苦些。

2-4.混用命名格式

這個(gè)可以說沒那么可恨，但是看著就別扭，比如表示評(píng)論列表，有地方這樣命名：comments，另一個(gè)地方這樣命名： comment-list，還有這樣命名： commentList。幾種規(guī)范混在一起，就感覺不規(guī)范了。

還用一種雖然一般不會(huì)出現(xiàn)的情況，也遇見了。比如一個(gè)地方有添加供應(yīng)商的按鈕，命名是：addSupplier 。在另一個(gè)地方也有相同的功能按鈕，完全一樣，結(jié)果命名是：addSupplierInfo 。當(dāng)時(shí)就以為這兩個(gè)不是同一個(gè)功能，造成了誤會(huì)。

2-5.強(qiáng)制中文拼音命名

有些名詞，被中國人創(chuàng)造出來（淘寶-taobao，微博-weibo），沒有英文翻譯的。就可以用中文拼音命名，其他的都建議用英文。

但是偏偏有時(shí)候就算有英文的單詞，有些人還是用中文拼音命名，比如一個(gè)文章列表，很多人就是沒用 articleList，直接寫 wenzhangliebiao。但是看的時(shí)候，一定會(huì)懵逼一會(huì)。

2-6.強(qiáng)制簡寫

簡介雖然可以讓命名看著更加的簡潔，但是有時(shí)卻會(huì)遇上強(qiáng)制簡寫的命名，比如一個(gè)函數(shù)是提交用戶評(píng)論信息的功能。原本以為是：handleCommentSubmit/submitComment/publishComment。結(jié)果后來一看–tjyhpl。強(qiáng)制簡寫還是用拼音的簡寫，后來讓他改一下，改成了ac。后來一問才知道他想表達(dá)的意思是 addComment ，當(dāng)時(shí)差點(diǎn)動(dòng)手了。

2-7.單復(fù)數(shù)不分

這個(gè)情況不算惡劣，只算是一種規(guī)范吧，之前有分別有兩個(gè)操作函數(shù)，一個(gè)是下載全部訂單數(shù)據(jù)，一個(gè)是下載當(dāng)前訂單數(shù)據(jù)。但是兩個(gè)函數(shù)的命名，一個(gè)是downloadOrderData，另一個(gè)是downloadOrder。這樣也產(chǎn)生了一點(diǎn)懵逼感。

面對(duì)這樣的情況，建議還是區(qū)分下單復(fù)數(shù)，downloadOrder，downloadOrderAll/downloadOrderList。區(qū)分了單復(fù)數(shù)的命名，如果有返回值，也可以讓別人大概知道，單數(shù)可能就是返回單個(gè)記錄，復(fù)數(shù)可能返回一個(gè)數(shù)組。

2-8.正反義詞錯(cuò)用

這個(gè)情況同上，不算是惡劣，只能算是不規(guī)范。比如：分別有兩個(gè)操作函數(shù)一個(gè)是顯示彈窗，一個(gè)是關(guān)閉彈窗。結(jié)果命名上面，一個(gè)是 showEditDialog 。另一個(gè)是 closeEditDialog 。

上面的案例，show 和 close ，一個(gè)是顯示，一個(gè)是關(guān)閉，顯然不是正反義詞。應(yīng)該出現(xiàn)的姿勢(shì)是，showEditDialog 和 hideEditDialog ，或者 openEditDialog 和 closeEditDialog

2-9.為所欲為的命名

還有其它的搞笑命名，在知乎上面看到的情況，別人遇到的情況。大家移步到知乎吧，這個(gè)不重復(fù)太多。

作為程序員，有沒有讓你感到既無語又崩潰的程序命名？。

3.命名相關(guān)格式

說完了命名第一個(gè)，命名單詞應(yīng)該正確的書寫之后。再來說下命名的相關(guān)格式在說自己的命名實(shí)例之前，先說下不同的命名對(duì)象，命名方式是不一樣的。具體如下：

待命名對(duì)象推薦名稱圖片小寫字母，‘-’或者‘_’ 分割css（class,id）‘-’ 分割文件，變量小駝峰命名js類（class）大駝峰命名常量大寫字母，‘_’ 分割臨時(shí)變量，私有變量‘_’ 開頭，駝峰命名

4.HTML命名

在說命名 HTML 命名之前，先說下布局的三個(gè)概念：模塊( module )和元件( unit )

模塊：各種常見的網(wǎng)頁內(nèi)容模塊，通常可以重復(fù)使用的較大的整體，比如導(dǎo)航、菜單、幻燈、圖文列表等。命名前面建議帶有 m-

元件：各種常見的網(wǎng)頁內(nèi)容元件，比如按鈕、標(biāo)題、輸入框等。命名前面建議帶有 u-

兩者關(guān)系，模塊包含元件，元件組成模塊。

小小實(shí)例

看到上面的一個(gè)小彈窗。整個(gè)彈窗，當(dāng)成一個(gè)模塊。可以把標(biāo)題，提示內(nèi)容，按鈕當(dāng)做元件。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">這里是提示內(nèi)容2</div>
 </div>
 <div class="m-box-buttons">
 <span class="u-btn-success">確定</span>
 </div>
 </div>
</div>

至于這樣的寫法有什么優(yōu)劣，注意事項(xiàng)，這里就不展開講了，以后再寫文章。

5.JavaScript命名

在js命名里面，應(yīng)該只有四種命名方式：小駝峰(productList)，大駝峰(ProductList)，大寫字符，下劃線分割（PRODUCT_LIST），下劃線開頭+小駝峰(_productList)

5-1.按照類型命名

5-1-1.小駝峰

在js寫法里面，小駝峰命名應(yīng)該是最多的一種。變量，函數(shù)一般而言都是使用小駝峰命名。

//登錄處理函數(shù)
let handleLogin=function(){}

5-1-2.大駝峰

在es6之前，js還沒有class的概念，但是也組織不了開發(fā)者模擬class。現(xiàn)在有了class，自然而然，class的命名規(guī)范就更離不開了。關(guān)于class的命名規(guī)范，應(yīng)該很多人都是習(xí)慣用大駝峰命名。

//創(chuàng)建一個(gè)類
class Person{
 //...
}

5-1-3.常量

常量建議還是使用大寫字符+下劃線命名。

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

5-1-4.私有變量

私有變量相對(duì)于外面作用域而言，為了區(qū)分變量是公用的，還是私有的。建議命名上面就做下區(qū)分，私有變量建議使用下劃線開頭+小駝峰命名方式。

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

5-2.按職責(zé)命名

函數(shù)命名，一般都是動(dòng)詞開頭。

5-2-1.獲取值

如果函數(shù)是為了獲取值(函數(shù)最后會(huì)返回一個(gè)值的)，函數(shù)前面建議帶有g(shù)et。

//根據(jù) ID 獲取用戶信息
function getUserInfo(id){
 
}

5-2-2.設(shè)置值

如果函數(shù)是為了設(shè)置值(函數(shù)最后會(huì)返回一個(gè)值的)，函數(shù)執(zhí)行就是為了給某一個(gè)變量賦值，函數(shù)前面建議帶有set。

//設(shè)置用戶信息
function setUserInfo(){
 
}

5-2-3.處理動(dòng)作

如果函數(shù)是為了處理一些操作，比如登錄，注冊(cè)，渲染列表等。那么就建議命名前面帶有handle。

//分頁操作
handleChangeCurrent(val){
 
}
//注冊(cè)操作
handleRegister(){
 
}

這個(gè)處理動(dòng)作，有些開發(fā)者也是習(xí)慣直接以動(dòng)作開始。openDialog，closeDialog等。

6.目錄，文件，圖片命名

6-1目錄，文件名稱的命名規(guī)則

統(tǒng)一小駝峰命名法。

如下例子：

目錄，文件建議命名首頁index，index.html搜索頁面search，search.html產(chǎn)品列表productList，productList.html產(chǎn)品詳細(xì)頁面productDetail，productDetail.html新聞列表newslist，newslist.html新聞詳細(xì)頁面newsdetail，newsdetail.html評(píng)論列表commentList，commentList.html關(guān)于我們about，about.html

如果發(fā)現(xiàn)名稱過長，可以在團(tuán)隊(duì)約定好簡寫格式：比如 product 簡寫成 pro 。

6-2圖片命名規(guī)范

如果是通用性質(zhì)的圖片，例如LOGO，菜單，側(cè)邊欄，背景等，就直接使用小寫字母命名。比如：logo.jpg ，menu.jpg，aside.jpg，bg.jpg。

如果不是通用的圖片，就建議根據(jù)類別-模塊-功能的格式。使用小寫字母，‘-’或者‘_’分割，如下例子：

圖片名稱意義btn-submit-comment.jpg提交評(píng)論的按鈕bg-product-list.jpg產(chǎn)品列表模塊的背景icon-views.png瀏覽數(shù)的圖標(biāo)icon-btn-vote.png投票按鈕ad-news-aside.jpg在新聞側(cè)邊欄的廣告圖片

7.參考資料

一些前端書寫規(guī)范建議

關(guān)于團(tuán)隊(duì)合作的css命名規(guī)范

8.小結(jié)

關(guān)于命名，很簡單，也很難。也是困擾著很多的開發(fā)者，包括我。該文章的命名方式，也是我在用的一種個(gè)人命名方式，希望能讓大家有所收獲。當(dāng)然其中還有很多的瑕疵，希望大家多多指點(diǎn)，或者推薦下自己建議的命名方式。

關(guān)于命名的規(guī)范，每個(gè)公司都有自己的編碼規(guī)范，只是很少公司能認(rèn)真貫徹執(zhí)行自己的規(guī)范，從而導(dǎo)致命名錯(cuò)亂。所以命名的難點(diǎn)，我不認(rèn)為是命名本身有難度，難度在于在項(xiàng)目上，面對(duì)各種需要命名的對(duì)象，堅(jiān)持使用一套命名格式，正確的命每一個(gè)名。

作者：守候i

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

擊上方藍(lán)字關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識(shí)，搞懂一個(gè)問題！

關(guān)于CSS命名，有人私問過我，說有時(shí)候會(huì)出現(xiàn)命名很糾結(jié)的情況，class命名感覺就非常亂，有時(shí)自己都看不下去了，分不清楚了。

其實(shí)寫出一套優(yōu)雅的CSS代碼也是一個(gè)合格的前端開發(fā)人員基本的且重要素質(zhì)。今天，我就來談?wù)勎移綍r(shí)是怎么命名CSS的。希望對(duì)大家有借鑒作用。

從四個(gè)方面，來總結(jié)一下：

一、分類處理樣式

心中一定要將CSS進(jìn)行一個(gè)分類，不管是小項(xiàng)目還是大項(xiàng)目都希望這樣處理。

1、布局（grid）: 我們將頁面分割為幾個(gè)大塊，通常有頭部、主體、主欄、側(cè)欄、尾部等。常用！

2、模塊（module）：即語義化的可以重復(fù)使用的較大的整體。如導(dǎo)航、登陸、注冊(cè)、列表、評(píng)論、搜索等。常用！

3、元件（unit）：通常是一個(gè)不可再分的較為小巧的個(gè)體，被重復(fù)用于各種模塊中，比如按鈕、輸入框、loading、圖表等。常用！

4、功能（function）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現(xiàn)，比如清除浮動(dòng)。不常用，不可濫用！

5、皮膚（skin）：對(duì)于換膚型網(wǎng)站需要使用，將皮膚型的樣式抽離出來，非換膚型網(wǎng)站不可濫用，不常用。

二、遵循一套命名規(guī)則

使用類選擇器，放棄ID選擇器。因?yàn)镮D在一個(gè)頁面中的唯一性導(dǎo)致了如果以ID為選擇器來寫css，就無法重用，而class而優(yōu)勢(shì)在于復(fù)用性，而且私有度也并不高。因此，我一般情況下會(huì)選擇在HTML中的ID用于JavaScript，但是在CSS里只用class，一個(gè)ID也不用。這樣做實(shí)際上也是將表現(xiàn)和行為分開，而不是混在一起。

class命名：使用單個(gè)字母（分類首字母）+"-"為前綴。

比如：對(duì)于header部分，我們可以這樣寫：

注意1：在css中，樣式的選擇器總是要以上面的 .g- .m- .u- .f- .s-這五類開頭，然后再里面使用后代選擇器。

注意2：這并不是說所有的className都需要加這些前綴，對(duì)于一些不屬于這幾種的元素，我們完全可以不加前綴，作為后代選擇器使用。

那么如何使用后代選擇器呢？注意三點(diǎn)

1、我們約定不以單個(gè)字母+“-”為前綴且長度大于等于2的類選擇器為后代選擇器。

如：.g-date .u-right_arrow{ float: right;} 這個(gè)就是不合適的，我們直接寫成 .u-right_arrow{ float: right;}即可。

2、一個(gè)語義化的標(biāo)簽也可以是后代選擇器。

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

3、盡量簡約而不失語義

如.m-abc這種完全沒有語義，不知道要表達(dá)什么，對(duì)于相同語義的不同命名，我們可以直接加數(shù)字或字母區(qū)分即可（如.m-list1、.m-list2,都是列表模塊，都通加數(shù)字即表示不同的列表模塊）。

三、注意一些代碼格式

1、選擇器、屬性和值都用小寫

這一點(diǎn)非常關(guān)鍵：根據(jù)xhtml規(guī)范，所有的標(biāo)簽屬性和值都要使用小寫形式，而我們知道xhtml更為標(biāo)準(zhǔn)，所以最好遵循之，這樣，選擇器必須小寫就是十分必要的了。既然這樣我們就不能使用駝峰式寫法來寫類名了，如class="u-leftArrow"實(shí)際上就是不規(guī)范的了，最好寫成class="u-left_arrow"，也可以表達(dá)相同的意思。

2、省略值為0的單位

這樣可以節(jié)省不必要的字節(jié)同時(shí)也為了方便閱讀，我們將0px、0em、0%等都縮寫為0。如下所示：

3、使用16進(jìn)制表示顏色值，其中的字母使用大寫形式，并盡量縮寫

除非在你需要透明度而使用rgba，否則都是用#FFFFFF這樣的寫法，并盡量縮寫，如#FFF。使用大寫形式，是因?yàn)檫@樣更加具有易讀性，且有利于壓縮，而縮寫為了減少不必要的字節(jié)。

4、關(guān)于屬性的書寫順序

這一點(diǎn)可能也是大家比較糾結(jié)的一個(gè)問題，大部分起初階段也是亂寫，甚至根本沒注意這個(gè)問題。

根據(jù)屬性的重要性順序來書寫。即先書寫定位布局類屬性，在書寫盒模型等自身屬性，最后書寫文本類及修飾類屬性。

另外，如果屬性間存在關(guān)聯(lián)性，則不要隔開來寫。如下代碼所示：

其中的height和line-height具有關(guān)聯(lián)性，盡量不要分開寫。

5、私有在前，標(biāo)準(zhǔn)在后

先寫帶有瀏覽器私有標(biāo)志的屬性，后寫W3C標(biāo)準(zhǔn)的屬性。因?yàn)樗接械膶傩裕f明瀏覽器自身還沒有規(guī)范化，標(biāo)準(zhǔn)屬性是用不了的。若某一天該瀏覽器的屬性規(guī)范化了，那么說明標(biāo)準(zhǔn)屬性可以使用了，而如果我們先寫W3C標(biāo)準(zhǔn)屬性，最后寫私有屬性，就有可能導(dǎo)致私有屬性覆蓋標(biāo)準(zhǔn)屬性。因此私有在前，標(biāo)準(zhǔn)在后的寫法是考慮到了以后可能會(huì)出現(xiàn)的問題。

其它一些減小CSS文件大小，可以縮寫的盡量采用縮寫形式等大家注意一下就行了。下面將一些常用的類選擇器命名列一下。供大家參考。

四、通常的類選擇器如何命名

前面我說過，命名className時(shí)，應(yīng)當(dāng)以其作用、功能來命名。要有語義化，下面從五個(gè)分類出發(fā)，列一些通常命名的名字。供參考

1、對(duì)于布局，即用.g-作為前綴，通常有以下推薦的寫法。

頭部： header或head

主體： body

尾部：footer或foot

主欄： main

側(cè)欄：side

盒容器： wrap或box

主欄子容器：mainc

側(cè)欄子容器：sidec

2、對(duì)于模塊，即.m-作為前綴。元件，.u-作為前綴，通常有下面推薦的寫法。

導(dǎo)航： nav

子導(dǎo)航：subnav

菜單：menu

選項(xiàng)卡：tab

標(biāo)題區(qū)：head或title

內(nèi)容區(qū)：body或content

列表：list

表格：table

表單：form

排行：top

熱點(diǎn)：hot

登錄：login

標(biāo)志：logo

廣告：adervertise

搜索：search

幻燈：slide

幫助：help

新聞：news

下載：download

注冊(cè)：register或regist

投票：vote

版權(quán):copyright

結(jié)果：result

按鈕：button

輸入：input

3、對(duì)于功能，即以.f-為前綴，通常推薦如下：

清除浮動(dòng)：clearboth

向左浮動(dòng)：floatleft

向右浮動(dòng): floatright

溢出隱藏：overflowhidden 　

4、對(duì)于顏色，即以.s-為前綴，通常推薦如下：

字體顏色：fontcolor

背景：background

背景顏色：backgroundcolor

背景圖片：backgroundimage

背景定位：backgroundposition

邊框顏色：bordercolor

5、對(duì)于狀態(tài)，即以.z-為前綴，通常推薦如下：

選中:selected

當(dāng)前：current

顯示：show

隱藏：hide

打開：open

關(guān)閉:close

出錯(cuò)：error

不可用:disabled

最后總結(jié)一下：

說一下CSS選擇器使用的注意事項(xiàng)：

1、.m-xxx div{}這種無主義不可取，且會(huì)造成大面積污染。

2、.g-zzz .m-xxx{}不可取，類別的選擇器的后代選擇中不應(yīng)當(dāng)包括類別選擇器。

3、不要將選擇器定的過于冗長，因?yàn)檫x擇器的結(jié)構(gòu)越復(fù)雜，瀏覽器的消耗就越大，一般建議在3個(gè)長度之內(nèi)寫完。