標準：使用谷歌國際標準代碼規範。

書寫規範：加強語義化，加強閱讀性。

1. 只用小寫字母

全部的代碼都用小寫字母：適用於元素名，屬性，選擇器，特性。javascript

<!-- 不推薦 -->
<A HREF="/">Home</A>
<!-- 推薦 -->
<img src="google.png" alt="Google">

2. 加強語義

根據HTML各個元素的用途而去使用它們,使用語義化標籤。
使用元素要知道爲何去使用它們和是否正確。例如，用heading元素構造標題， p 元素構造段落, a 元素構造錨點等。
禁止用行內元素包裹塊級標籤，最好不要在p標籤內嵌套別的標籤css

<!-- 不推薦 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推薦 -->
<a href="recommendations/">All recommendations</a>

3. HTML結構、CSS樣式、JS分離

儘可能確保HTML中只包含HTML結構，把全部CSS都放到樣式表文件裏，把全部JS都放到腳本文件裏。html

<!-- 不推薦 -->
<!DOCTYPE html>
<title>HTML sucks</title>
<style type='text/css'> p{background:red;}
</style>
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:</p>
<u>HTML is stupid!!1</u>
<script type="text/javascript"> document.getElementsByTagName("u").innerHtml = 'HTML is stupid!!2'; </script>
<!-- 推薦 -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually</p>
<script src="default.js" type="text/javascript"></script>

格式規範：禁止看到良莠不齊的格式

1. HTML格式

每一個塊元素、列表元素或表格元素都獨佔一行，每一個子元素都相對於父元素進行縮進。
獨立元素的樣式，將塊元素、列表元素或表格元素都放在新行。
另外須要縮進塊元素、列表元素或表格元素的子元素（統一兩個空格縮進，不要使用 Tab 或者 Tab、空格混搭）。java

<!-- 不推薦 -->
<section>
   <div class=""></div>
     <h1></h1>
 <div>
      <span></span>
     <em></em>
      </div>
</section>
<!-- 推薦 -->
<section>
      <div class=""></div>
      <h1></h1>
      <div>
          <span></span>
          <em></em>
      </div>
</section>

2. CSS格式

依字母順序進行聲明。

都按字母順序聲明，很容易記住和維護。 忽略瀏覽器的特定前綴排序，但多瀏覽器特定的某個CSS屬性前綴應相對保持排序（例如-moz前綴在-webkit前面）。 background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;

代碼塊內容縮進，它可以提升層次結構的清晰度。

@media screen, projection { html { background: #fff; color: #444;
  } }

聲明完結，全部聲明都要用「;」結尾。

/* 不推薦 */ .test { display: block; height: 100px }
/* 推薦 */ .test { display: block; height: 100px;
}

規則分行，每一個規則獨立一行，兩個規則之間隔行

html { background: #fff;
} . body { margin: auto; width: 50%;
}

命名規範：嚴禁特簡化命名

1. ID和class的命名規範

爲ID和class取通用且有意義的名字 /* 不推薦: 無心義 不易理解 */ #yee-1901 {}
/* 不推薦: 表達不具體 */ .button-green {} .clear {}
/* 推薦: 明確詳細 */ #gallery {} #login {} .video {}
/* 推薦: 通用 */ .aux {} .alt {}

2. ID和class命名風格

非必要的狀況下，ID和class的名稱應儘可能簡短；但也要傳達ID或class是關於什麼的。 /* 不推薦 */ #navigation {} .atr {}
/* 推薦 */ #nav {} .author {}

3. 類型選擇器

非必要的狀況下不要使用元素標籤名和ID或class進行組合;出於性能上的考慮避免使用父輩節點作選擇器. /* 不推薦 */ ul#example {} div.error {}
/* 推薦 */ #example {} .error {}

4. 屬性縮寫

寫屬性值的時候儘可能使用縮寫；CSS不少屬性都支持縮寫shorthand （例如 font 、background） 儘可能使用縮寫，甚至只設置一個值。 /* 不推薦 */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; /* 推薦 */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;

5. 省略0後面的單位，省略0開頭小數點前面的0

.test { margin: 0; padding: 0; font-size: .8em;
}

6. ID和class命名的定界符

ID和class名字有多單詞組合的用短破折號「-」分開。 /* 不推薦：「demo」和「image」中間沒加「-」 */ .demoimage {}
/* 不推薦：用下劃線「_」 */ .error_status {}
/* 不推薦：用駝峯命名 */ .errorStatus {}
/* 推薦 */ #video-id {} .ads-sample {}

Js語法規範：嚴格按照此中語言的語法要求進行編碼

1. 變量

小駝峯式命名法由小寫字母開始，後續每一個單詞首字母都大寫 // 很差的命名方式
var max_count = 10; var TableTitle = 'LoginTable'; // 好的命名方式
var maxCount = 10; var tableTitle = 'LoginTable';

2. 函數

小駝峯式命名法由小寫字母開始，後續每一個單詞首字母都大寫 // 是否可閱讀
function canRead() { return true; } // 獲取名稱
function getName() { return this.name; }

3. 常量

名稱所有大寫，使用大寫字母和下劃線來組合命名，下劃線用以分割單詞 var MAX_COUNT = 10; var URL = 'http://www.baidu.com';

4. 構造函數

大駝峯式命名法，首字母大寫，後續每一個單詞首字母都大寫 function Student(name) { this.name = name; } var st = new Student('tom');

5. 類

公共屬性和方法：跟變量和函數的命名同樣。 私有屬性和方法：前綴爲_(下劃線)，後面跟公共屬性和方法同樣的命名方式。 function Student(name) { var _name = name; // 私有成員
  // 公共方法
  this.getName = function () { return _name; } // 公共方式
  this.setName = function (value) { _name = value; } } var st = new Student('tom'); st.setName('jerry'); console.log(st.getName()); // => jerry：輸出_name私有變量的值

6.空格

二元運算符必須有一個空格，一元運算符與操做對象之間不容許有空格 var a = !arr.length; a++; a = b + c;

用做代碼塊其實的左花括號 「{「 前必須有一個空格 if (condition) { //code
 } function funName() { //code
  }

關鍵詞if/else/for/while/function/switch/do/try/catch/finally後，必須有一個空格

  if (condition) { //code
 } while (condition) { //code
 } (function () { //code
  })();

在對象建立時，屬性中的 「:」以後必須有空格，」:」以前不容許有空格 var obj = { a: 1, b: 2, c: 3 };

函數聲明、具名函數表達式、函數調用中，函數名和 「(「 之間不容許有空格 function funName() { //code
 } var funName = function funName() { //code
 }; funName();

「,」 和 「;」前不容許有空格。若是不位於行尾， 「,」和」;」後必須跟一個空格 callFunc(a, b);

行尾不容許有多餘的空格

5. 換行

每一個獨立語句結束後必須換行 每行不得超過120個字符（超長的不可分割的代碼容許例外，好比複雜的正則表達式，長字符串不在例外之列） 運算符處換行時，運算符必須在新行的行首 if (user.isAuthenticated() && user.isInRole('admin') && user.hasAuthority('add-admin') || user.hasAuthority('delete-admin') ) { //code
 } var result = number1 + number2 + number3 + number4 + number5;

在函數聲明、函數表達式、函數調用、對象建立、for語句等場景中，不容許在 「,」 或 「;」 前換行 var obj = { a: 1, b: 2, c: 3 }; foo( a, b, callback );

6. 語句

不得省略語句結束的分號 在if/else/for/do/while語句中，即便只有一行，也不得省略塊{…} if (condition) { callFunc(); }

函數定義結束不容許添加分號 function funName() { }

若是是函數表達式，分號不能省略 var funName = function () { };

註釋

推薦多寫說明註釋，HTML模塊說明註釋、函數方法說明註釋和組件用法說明註釋web

1. HTML

<!-- HTML推薦註釋，左右各空一個空格，註釋說明，單行 -->
<div class="sell"></div>
<!-- HTML推薦註釋，註釋符號一上一下覆蓋整個要註釋的區塊，多行註釋 -->
<!-- <div class="sell"> <p>多行註釋</p> <p>多行註釋</p> <p>多行註釋</p> <p>多行註釋</p> </div> -->

2. CSS

/* CSS推薦註釋，左右各空一個空格，區塊註釋說明 */ .sell { background: #000;
}
/* CSS推薦註釋，註釋符號一上一下覆蓋整個要註釋的區塊，多行註釋 */
/* .sell p { background: #000; font-size: 12px; } */

3. JS

// Js推薦註釋，註釋符號與註釋說明之間空一個空格，單行
var sellEle = document.querySelector('.sell'); // Js推薦註釋，註釋符號一上一下覆蓋整個要註釋的區塊，多行註釋 /* var sellEle = document.querySelector('.sell'); console.log(sellEle); */
/** * 函數說明 * 合併Grid的行 * @param {Grid} grid 須要合併的Grid * @param {Array} cols 須要合併列的Index(序號)數組；從0開始計數，序號也包含。 * @param {Boolean} isAllSome 是否2個tr的cols必須完成同樣才能進行合併。true：完成同樣；false(默認)：不徹底同樣 * @return void * @author barry */
function mergeCells(grid, cols, isAllSome) { // Do Something
}

使用@extends標記類的繼承信息 /** * 描述 * * @class * @extends Developer */
function Fronteer() { Developer.call(this); } util.inherits(Fronteer,Developer);

常量註釋 /** * 常量說明 * @const * @type {string} */
var REQUEST_URL = 'myurl.do';

網頁前端開發規範