開始寫代碼以來，我們發(fā)現(xiàn)最痛苦的不是深奧的算法、不是復(fù)雜排版、也不是酷炫的動畫，而是最最簡單的命名！漸漸發(fā)現(xiàn)開發(fā)過程中我們60%的時間都花在了給各種各樣的東西起名字：

• 項目名、包名、文件名
• 項目中引用的圖片資源文件名
• css的類名、id名
• js方法名、參數(shù)變量名
• 接口名，請求參數(shù)名、返回變量名

有時真的會被一波一波的名字攻擊的頭暈?zāi)X脹，索性隨便起個名字了事。但這往往卻是自己給自己挖坑的開始。這在一個人的小項目中看起來并沒有什么影響，但到了大型項目的多人協(xié)作和代碼維護時，其弊端就開始顯現(xiàn)。糟糕的命名往往給代碼帶來了一堵無形的墻，讓我們必須深入代碼去研究代碼具有的行為，增加了理解代碼的時間，也增加了代碼維護的難度。

一個正確的命名可以讓你更容易地理解代碼的程序，好的命名可以消除二義性，消除誤解，并且說明真實的意圖，甚至可以讓你有清新的氣息以讓你更能吸引異性。－－陳皓（左耳朵耗子）

總之，變量名是編程的第一步，第一步走好了，后面才走得好。試想，我們在看一段一目了然的代碼時有多么的輕松愉悅～

指導(dǎo)原則

為此我總結(jié)了幾條關(guān)于命名的指導(dǎo)原則，希望能對自己和大家的命名設(shè)計帶來幫助^_

黃金法則- 花一些時間去思考去權(quán)衡一下你的變量名
當你設(shè)計好一個的變量名一個函數(shù)名的時候，別著急去使用他，停下來，想一想，這個變量名是否合適，是否還有更好的？也許你正在使用的是一個很不好的變量名。有些時候，需要我們權(quán)衡利弊一下，可能還要去和同事討論一下。

接下來是一些具體的原則

1. 語義
   應(yīng)該讓代碼“讀”起來就像自然語言一樣。

• 變量名應(yīng)該是名詞
  也就是說對于“物理上”的東西，命名其是什么，而不是做什么。比如某些物理上的名字，姓名，性別，文件路徑，網(wǎng)絡(luò)鏈接，文件描述符，下標索引，類的屬性，這些都是物理上的東西，所以，其名字應(yīng)該是標識其是什么，而不是用來做什么。
• 函數(shù)名應(yīng)是動詞
  也就是說對于“邏輯上”的東西，命名其做什么，而不是是什么。比如某些邏輯上的名字，函數(shù)名，數(shù)據(jù)結(jié)構(gòu)，等。

2. 準確、精簡
   例如：注意區(qū)分insert、append并替代add使用。盡可能使用email代替emailAddress，因為后者幾乎沒有提供比前者更多的信息。不要以任何理由使用臨時性的命名

// 反例
temp
button1
button2
a, b, c

3. 統(tǒng)一
   無論如何，至少在同一個項目中保持統(tǒng)一的命名規(guī)范。

4. 分割標識符中的單詞
   不管你用什么命名方式，單詞還是要分一下，方便閱讀：

JS方法名（駝峰式）: someFunction
css類名 ： some-class
靜態(tài)變量： SOME_FUNCTION

具體規(guī)范

接下來是我總結(jié)的一下具體實用的命名規(guī)范，希望和大家一起探討

項目、包、文件命名

文件名要全部小寫, 可以包含下劃線 ( _ ) 或連字符 (-). 按項目約定來. 如果并沒有項目約定，“ _ ” 更好。

以下是引用** 視覺 **的圖片命名規(guī)則，視覺和前端er們同時遵守會幫助我們減少很多的工作量，發(fā)現(xiàn)合作是如此的愉快～^_

關(guān)于** 切圖命名 **規(guī)則：
模塊_類別_功能_狀態(tài).png
舉個栗子： nav_button_search_default.png

名稱|命名|名稱|命名
:---------------|:---------------|:---------------|:--------------
搜索 |search|按鈕|button(btn)
菜單欄|tab |背景 |BG
用戶|user|刷新|refresh
圖片|image|廣告|banner
注冊|register|鏈接|link
導(dǎo)航欄|nav|圖標|icon
個人資料|profile|彈出|pop
刪除|delete|下載|download
登陸|login|標題|title
注釋|note|返回|back
編輯|edit|內(nèi)容|content
左、右、中|left、right、center|標志|logo
提示信息|msg| |
狀態(tài)（選中）|selected|狀態(tài)（不可點）|disabled
狀態(tài)（默認）|default|狀態(tài)（按下）|pressed

HTMLSemantic Markup:語義標記

HTML與CSS最佳實踐中重要的一條就是怎么來寫出有語義可讀性的標記。好的語義即是你使用了合適的HTML標簽與CSS的類名來傳達出你想表達的結(jié)構(gòu)含義。
譬如 h1 標簽會告訴我們里面包裹的是一些很重要的標題信息，另一個例子就是*footer *標簽，會直截了當?shù)馗阏f，這里面是包含一些頁腳信息。

寫HTML代碼時應(yīng)注意什么？

1. 盡可能少的使用無語義的標簽div和span；

2. 不要使用純樣式標簽，如：b、font、u等，改用css設(shè)置。
3. 需要強調(diào)的文本，可以包含在strong或者em標簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
4. 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
5. 表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；
6. 每個input標簽對應(yīng)的說明文本都需要使用label標簽，并且通過為input設(shè)置id屬性，在lable標簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。

HTML5新增的語義標簽

1. header元素
   header 元素代表“網(wǎng)頁”或“section”的頁眉。通常包含h1-h6元素或hgroup，作為整個頁面或者一個內(nèi)容塊的標題。也可以包裹一節(jié)的目錄部分，一個搜索框，一個nav，或者任何相關(guān)logo。
   整個頁面沒有限制header元素的個數(shù)，可以擁有多個，可以為每個內(nèi)容塊增加一個header元素如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

<header> <hgroup> <h1>網(wǎng)站標題</h1> <h1>網(wǎng)站副標題</h1> </hgroup> </header>

2. footer元素
   footer元素代表“網(wǎng)頁”或“section”的頁腳，通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。如果footer元素包含了整個節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標簽，類別等一些其他類似信息。

<footer> COPYRIGHT@小北</footer>

3. nav元素
   nav元素代表頁面的導(dǎo)航鏈接區(qū)域。用于定義頁面的主要導(dǎo)航部分。

<nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav>

4. aside元素
   aside元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當前文章有關(guān)的相關(guān)資料、標簽、名次解釋等。（特殊的section）
   在article元素之外使用作為頁面或站點全局的附屬信息部分。最典型的是側(cè)邊欄，其中的內(nèi)容可以是日志串連，其他組的導(dǎo)航，甚至廣告，這些內(nèi)容相關(guān)的頁面。

<article> <p>內(nèi)容</p> <aside> <h1>作者簡介</h1> <p>萱萱，前端一枚</p> </aside> </article>

5. section元素
   section元素代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個頁面里的分組。
   section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。如下：

<section> <h1>section是啥？</h1> <article> <h2>關(guān)于section</h1> <p>section的介紹</p> <section> <h3>關(guān)于其他</h3> <p>關(guān)于其他section的介紹</p> </section> </article> </section>

article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div

6. article元素
   article元素最容易跟section和div容易混淆，其實article代表一個在文檔，頁面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨立開發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。（特殊的section）
   除了它的內(nèi)容，article會有一個標題（通常會在header里），會有一個footer頁腳。

<article> <h1>一篇文章</h1> <p>文章內(nèi)容..</p> <footer> <p><small>版權(quán)：html5jscss網(wǎng)所屬，作者：小北</small></p> </footer> </article>

article使用注意：

• 自身獨立的情況下：用article
• 是相關(guān)內(nèi)容：用section
• 沒有語義的：用div

css命名

接下來是css中成“噸”的class的命名

命名規(guī)則

1. class 名稱中只能出現(xiàn)小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應(yīng)當用于相關(guān) class 的命名（類似于命名空間）（例如，.btn和 .btn-danger）。
2. 首字符必須是字母，禁止數(shù)字或其他特殊字符。
3. 避免過度任意的簡寫。.btn代表 button，但是 .s不能表達任何意思。
4. 使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。避免使用123456…, red, blue, left, right之類的（如顏色、字號大小等）矢量命名，如class='left-news'、class='2'，以避免當狀態(tài)改變時名稱失去意義。盡量用單個單詞簡單描述class名稱。
5. 基于最近的父 class 或基本（base） class 作為新 class 的前綴。
6. 雙單詞或多單詞組合方式：形容詞-名詞、命名空間-名次、命名空間-形容詞-名詞。例如：news-list、mod-feeds、mod-my-feeds、cell-title

Class 和 id的使用方法

把id留給后臺開發(fā)和JS使用，除此之外頁面的page id(如首頁的外層需要一個ID id='pageIndex')，頁面結(jié)構(gòu)（header main footer）允許用id命名(ID命名建議使用駝峰命名)。其他禁止id使用在樣式表CSS命名中，一律使用class命名。

CSS內(nèi)部的分類及其順序

1. 重置（reset）和默認（base）（tags）：消除默認樣式和瀏覽器差異，并設(shè)置部分標簽的初始樣式，以減少后面的重復(fù)勞動,可以根據(jù)你的網(wǎng)站需求設(shè)置.
2. 統(tǒng)一處理：建議在這個位置統(tǒng)一調(diào)用背景圖（這里指多個布局或模塊或元件共用的圖）和清除浮動（這里指通用性較高的布局、模塊、元件內(nèi)的清除）等統(tǒng)一設(shè)置處理的樣式！
3. 布局（grid）（.grid-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側(cè)欄、尾部等！
4. 模塊（module）（.mod-）：通常是一個語義化的可以重復(fù)使用的較大的整體！比如導(dǎo)航、登錄、注冊、各種列表、評論、搜索等！
5. 元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復(fù)用于各種模塊中！比如按鈕、輸入框、loading、圖標等！
6. 功能（function）（.fun-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現(xiàn)，比如清除浮動等！不可濫用！
7. 皮膚（skin）（.skin-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網(wǎng)站通常只提取文字色！非換膚型網(wǎng)站不可濫用此類！
8. 狀態(tài)：為狀態(tài)類樣式加入前綴，統(tǒng)一標識，方便識別，她只能組合使用或作為后代出現(xiàn)

推薦通用命名

1. 頁面框架命名，一般具有唯一性

2.模塊結(jié)構(gòu)命名

Class名稱|命名|Class名稱|命名
:---------------|:---------------|:---------------|:-- -------------
模塊(如：新聞模塊) |mod (mod-news) |標題欄 |title
內(nèi)容 |content |次級內(nèi)容 |sub-content

3.導(dǎo)航結(jié)構(gòu)命名

4.一般元素命名

5.全局皮膚樣式

• 文字顏色(命名空間text-xxx)
  text-c1, text-c2,text-c3……

• 背景顏色(命名空間bg -xxx)
  bg-c1,bg-c2,bg-c3……

• 邊框顏色(命名空間border-xxx)
  border-c1,border-c2,border-c3……

JS命名（駝峰式）

JS的變量和方法命名除了遵循上文的指導(dǎo)原則外最重要的是采用駝峰式命名，保證見文知義。