前端編碼規(guī)范（1）

html 代碼:
my-script.js
my-camel-case-name.css
i-love-underscores.html
thousand-and-one-scripts.js
my-file.min.css

協(xié)議

不要指定引入資源所帶的具體協(xié)議。

當(dāng)引入圖片或其他媒體文件，還有樣式和腳本時(shí)，URLs 所指向的具體路徑，不要指定協(xié)議部分（http:, https:），除非這兩者協(xié)議都不可用。

不指定協(xié)議使得 URL 從絕對(duì)的獲取路徑轉(zhuǎn)變?yōu)橄鄬?duì)的，在請(qǐng)求資源協(xié)議無(wú)法確定時(shí)非常好用，而且還能為文件大小節(jié)省幾個(gè)字節(jié)。

不推薦

html 代碼:
<script src="http:///foundation.min.js"></script>

推薦

html 代碼:
<script src="http:///foundation.min.js"></script>

不推薦

css 代碼:
.example {
  background: url(http://static./images/bg.jpg);
}

推薦

css 代碼:
.example {
  background: url(//static./images/bg.jpg);
}

文本縮進(jìn)

一次縮進(jìn)兩個(gè)空格。

html 代碼:
<ul>
  <li>Fantastic</li>
  <li>Great</li>
  <li>
    <a href="#">Test</a>
  </li>
</ul>

css 代碼:
@media screen and (min-width: 1100px) {
  body {
    font-size: 100%;
  }
}

js 代碼:
(function(){
  var x = 10;
 
  function y(a, b) {
    return {
      result: (a + b) * x
    }
 
  }
}());

注釋

注釋是你自己與你的小伙伴們了解代碼寫(xiě)法和目的的唯一途徑。特別是在寫(xiě)一些看似瑣碎的無(wú)關(guān)緊要的代碼時(shí)，由于記憶點(diǎn)不深刻，注釋就變得尤為重要了。

編寫(xiě)自解釋代碼只是一個(gè)傳說(shuō)，沒(méi)有任何代碼是可以完全自解釋的。而代碼注釋，則是永遠(yuǎn)也不嫌多。

當(dāng)你寫(xiě)注釋時(shí)一定要注意：不要寫(xiě)你的代碼都干了些什么，而要寫(xiě)你的代碼為什么要這么寫(xiě)，背后的考量是什么。當(dāng)然也可以加入所思考問(wèn)題或是解決方案的鏈接地址。

不推薦

js 代碼:
var offset = 0;
 
if(includeLabels) {
  // Add offset of 20
  offset = 20;
}

推薦

js 代碼:
var offset = 0;
 
if(includeLabels) {
  // If the labels are included we need to have a minimum offset of 20 pixels
  // We need to set it explicitly because of the following bug: http:///issue-tracker/ISSUE-1
  offset = 20;
}

一些注釋工具可以幫助你寫(xiě)出更好的注釋。JSDoc 或 YUIDoc 就是用來(lái)寫(xiě) JavaScript 注釋用的。你甚至可以使用工具來(lái)為這些注釋生成文檔，這也是激勵(lì)開(kāi)發(fā)者們寫(xiě)注釋的一個(gè)好方法，因?yàn)橐坏┯辛诉@樣方便的生成文檔的工具，他們通常會(huì)開(kāi)始花更多時(shí)間在注釋細(xì)節(jié)上。

css 代碼:
 

代碼檢查

對(duì)于比較寬松自由的編程語(yǔ)言來(lái)說(shuō)，嚴(yán)格遵循編碼規(guī)范和格式化風(fēng)格指南就顯得極為重要。遵循規(guī)范固然很好，但是有自動(dòng)化流程來(lái)確保其執(zhí)行情況，豈不更佳。Trust is good, control is better.

對(duì)于 JavaScript，建議使用 JSLint 或 JSHint。

[1]: Compass 是一個(gè)基于 Sass 開(kāi)源的 CSS 框架，而 Sass 是一個(gè)非常流行的 CSS 預(yù)編譯器。

系列文章

• 前端編碼規(guī)范（1）—— 一般規(guī)范
• 前端編碼規(guī)范（2）—— HTML 規(guī)范
• 前端編碼規(guī)范（3）—— JavaScript 規(guī)范
• 前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 規(guī)范