HTML+CSS+JS編碼規範

1.使用兩個空格做爲縮進，不使用tab鍵，對於非 HTML 標籤之間的縮進，好比 script 或 style 標籤內容縮進，與 script 或 style 標籤的縮進同級。

2.class命名單詞使用小寫，單詞之間使用中橫線來分隔，必須表明相應模塊或者內容或者功能，不得使用標籤信息或者樣式信息進行命名

3.id必須保證頁面的惟一性，若重複只會匹配第一個，沒有實際意義；採用駝峯命名方式；描述清楚的前提下儘可能短

4.不在自動閉合的標籤結尾處使用斜線：input、br、hr、img

5.對 HTML5 中規定容許省略的閉合標籤，不容許省略閉合標籤

6.屬性值必須使用雙引號；布爾類型的屬性不建議添加屬性值：如disable、checked、required、readonly

7.屬性應該按照特定的順序出現以保證易讀性。

• class
• id
• name
• data-*
• src, for, type, href, value , max-length, max, min, pattern
• placeholder, title, alt
• aria-*, role
• required, readonly, disabled

8.頁面必須使用精簡形式，明確指定字符編碼。指定字符編碼的 meta 必須是 head 的第一個直接子元素；頁面必須包含 title 標籤聲明標題。title 必須做爲 head 的直接子元素，並緊隨 charset 聲明以後

9.引入 CSS 時必須指明 rel="stylesheet"；引入 CSS 和 JavaScript 時無須指明 type 屬性

10.（建議）在 head 中引入頁面須要的全部 CSS 資源；JavaScript 應當放在頁面末尾，或採用異步加載。

11.保證 favicon 可訪問：

在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。爲了保證 favicon 可訪問，避免 404，必須遵循如下兩種方法之一：

　　1.在 Web Server 根目錄放置 favicon.ico 文件      2.使用 link 指定 favicon。

　　示例：<link rel="shortcut icon" href="path/to/favicon.ico">

12.圖片：

禁止 img 的 src 取值爲空。延遲加載的圖片也要增長默認的 src：src 取值爲空，會致使部分瀏覽器從新加載一次當前頁面

避免爲 img 添加沒必要要的 title 屬性：多餘的 title 影響看圖體驗，而且增長了頁面尺寸。

爲重要圖片添加 alt 屬性：能夠提升圖片加載失敗時的用戶體驗。

爲避免頁面抖動，給元素添加 width 和 height 屬性。

有下載需求的圖片採用 img 標籤實現，無下載需求的圖片採用 CSS 背景圖實現。

　　(1).產品 logo、用戶頭像、用戶產生的圖片等有潛在下載需求的圖片，以 img 形式實現，能方便用戶下載。

　　(2).無下載需求的圖片，好比：icon、背景、代碼使用的圖片等，儘量採用 CSS 背景圖實現

13.表單

有文本標題的控件必須使用 label 標籤將其與其標題相關聯。

有兩種方式：

　　(1).將控件置於 label 內 ：<label><input type="checkbox" name="confirm" value="on"> 我已確認上述條款</label>   （推薦使用，減小沒必要要的 id）

　　(2).label 的 for 屬性指向控件的 id：<label for="username">用戶名：</label> <input type="textbox" name="username" id="username">  （若是 DOM 結構不容許直接嵌套，則應使用這種）

14.使用 button 元素時必須指明 type 屬性值
button 元素的默認 type 爲 submit，若是被置於 form 元素中，點擊後將致使表單提交。爲顯示區分其做用方便理解，必須給出 type 屬性。

15.在支持 HTML5 的瀏覽器中優先使用 audio 和 video 標籤來定義音視頻元素。

 

CSS編碼規範

1.使用兩個空格做爲縮進層級，不使用tab鍵；選擇器與 {之間空一格；屬性名 與以後的 : 之間不容許包含空格， : 與 屬性值之間必須包含空格

    

2.列表型屬性值書寫在單行時，,逗號後必須跟一個空格

   

3.當一個 rule 包含多個 selector 時，每一個選擇器聲明必須獨佔一行

    

4.>、+、~ 選擇器的兩邊各留一個空格

   

5.屬性選擇器中的值必須用雙引號包圍

  

6.選擇器的嵌套層級應不大於 3 級，位置靠後的限定條件應儘量精確

7.使用 border / margin / padding 等縮寫時，應注意隱含值對實際數值的影響，確實須要設置多個方向的值時才使用縮寫

8.屬性書寫順序：

同一 rule set 下的屬性在書寫時，應按功能進行分組，組之間添加一個空行，按照如下順序書寫，可提升代碼的可讀性（若是有content屬性應該放在最前面）

　　·Formatting Model（佈局方式、位置）：position / top / right / bottom / left / float / display / overflow 等

　　·Box Model（尺寸）：border / margin / padding / width / height 等

　　·Typographic（文本相關） ：font / line-height / text-align / word-wrap 等

　　·Visual（視覺效果）：background / color / transition / list-style 等

另外，若是包含 content 屬性，應放在最前面

9.儘可能不使用 !important 聲明；將 z-index 進行分層，對文檔流外絕對定位元素的視覺層級關係進行管理

10.文本內容必須用雙引號；url() 中的路徑加雙引號

    

11.當數值爲 0 - 1 之間的小數時，省略整數部分的 0；長度爲 0 時須省略單位。 (也只有長度單位可省)

    

12.RGB顏色值必須使用十六進制記號形式 #rrggbb。不容許使用 rgb()。帶有alpha的顏色信息可使用 rgba()。使用 rgba() 時每一個逗號後必須保留一個空格；顏色值使用小寫保持一致，能夠縮寫時使用縮寫（#ffffff->#fff）;儘可能不使用命名色值（eg: red）

   

13.必須同時給出水平和垂直方向的位置。只有一個方向的值時，另外一個方向的值會被解析爲 center。爲避免理解上的困擾，應同時給出兩個方向的值。

   如：background-position：center top；

14.font-family 屬性中的字體族名稱應使用字體的英文 Family Name，其中若有空格，須放置在引號中。

常見名稱以下：

• 宋體 SimSun
• 黑體 SimHei
• 微軟雅黑 YaHei
• 微軟正黑 Microsoft JhengHei

如：font-family: "Microsoft YaHei"; 取代 font-family: "微軟雅黑"；

15.須要在 Windows 平臺顯示的中文內容，其字號應不小於 12px；font-weight 屬性必須使用數值方式描述

     CSS 的字重分 100 – 900 共九檔，但目前受字體自己質量和瀏覽器的限制，實際上支持 400 和 700 兩檔，分別等價於關鍵詞 normal 和 bold

16.使用 transition 時應指定 transition-property；儘量在瀏覽器能高效實現的屬性上添加過渡和動畫

    在可能的狀況下應選擇這樣四種變換：

• transform: translate(npx, npx);
• transform: scale(n);
• transform: rotate(ndeg);
• opacity: .1;

   

17.響應式：儘可能將媒體查詢的規則靠近與他們相關的規則，不要將他們一塊兒放到一個獨立的樣式文件中，或者丟在文檔的最底部；Media Query 若是有多個逗號分隔的條件時，應將每一個條件放在單獨一行中

    

18.屬性前綴：帶私有前綴的屬性由長到短排列，按冒號位置對齊，方便閱讀與編輯

    

19.儘可能使用選擇器 hack 處理兼容性，而非屬性 hack;須要添加 hack 時應儘量考慮是否能夠採用其餘方式解決。
     若是能經過合理的 HTML 結構或使用其餘的 CSS 定義達到理想的樣式，則不該該使用 hack 手段解決問題。一般 hack 會致使維護成本的增長

    

 

JavaScript編碼規範

1.使用 2 個空格做爲一個縮進層級，不容許使用 tab 字符；switch下的case 和 default 必須增長一個縮進層級

2.二元運算符兩側必須有一個空格（如使用calc（）），一元運算符與操做對象之間不容許有空格

   

3.用做代碼塊起始的左花括號 { 前必須有一個空格

   

4.if / else / for / while / function / switch / do / try / catch / finally 關鍵字後，必須有一個空格；在對象建立時，屬性中的 : 以後必須有空格，: 以前不容許有空格

   

5.函數聲明、函數調用中，函數名和 ( 之間不容許有空格；, 和 ; 前不容許有空格

   

6.在函數調用、函數聲明、括號表達式、屬性訪問、if / for / while / switch / catch 等語句中，() 和 [] 內緊貼括號部分不容許有空格；單行聲明的數組與對象，若是包含元素，{} 和 [] 內緊貼括號部分不容許包含空格

   

7.每一個獨立語句結束後必須換行，每行不得超過 120 個字符，運算符處換行時，運算符必須在新行的行首；在函數聲明、函數表達式、函數調用、對象建立、數組建立、for 語句等場景中，不容許在 , 或 ; 前換行；不得省略語句結束的分號

   

   

8.函數定義結束不容許添加分號

   

9.IIFE（ Immediately-Invoked Function Expression） 必須在函數表達式外添加 (，非 IIFE 不得在函數表達式外添加 (。

    額外的 ( 可以讓代碼在閱讀的一開始就能判斷函數是否當即被調用，進而明白接下來代碼的用途。而不是一直拖到底部才恍然大悟

   

10.變量、函數、函數參數、類的方法 / 屬性使用Camel命名法；

var loadingModules = {} 、 function stringFormat(source) { } 、 function hear(theBells) { } 、 function TextNode(value, engine) { this.value = value; this.engine = engine; }

    常量使用所有字母大寫，單詞間下劃線分隔的命名方式；

var HTML_ENTITY = {};

    類使用Pascal命名法（使用名詞）、枚舉變量 使用 Pascal命名法，枚舉的屬性 使用 所有字母大寫，單詞間下劃線分隔 的命名方式

  function TextNode(options) { } 、 var TargetState = { READING: 1, READED: 2, APPLIED: 3, READY: 4 };

11.單行註釋：必須獨佔一行。// 後跟一個空格，縮進與下一行被註釋說明的代碼一致。

     多行註釋：/*   */,*後跟一個空格

    建議如下狀況下使用：

• 難於理解的代碼段
• 可能存在錯誤的代碼段
• 瀏覽器特殊的HACK代碼
• 業務邏輯強相關的代碼

 12.爲了便於代碼閱讀和自文檔化，如下內容必須包含以 /*.../ 形式的塊註釋中：

1. 文件
2. 類
3. 函數或方法
4. 全局變量
5. 常量

13.類型定義都是以 { 開始, 以 } 結束；對於基本類型 {string}, {number}, {boolean}，首字母必須小寫；文件頂部必須包含文件註釋，用 @file 標識文件說明

     

14.類的屬性或方法等成員信息不是 public 的，應使用 @protected 或 @private 標識可訪問性；對 Object 中各項的描述， 必須使用 @param 標識；常量必須使用 @const 標記，幷包含說明和類型信息

    

    

15.變量、函數在使用前必須先定義；每一個 var 只能聲明一個變量

     一個 var 聲明多個變量，容易致使較長的行長度，而且在修改時容易形成逗號和分號的混淆

    

17.一個函數做用域中全部的變量聲明儘可能提到函數起始位置

18.在 Equality Expression 中使用類型嚴格的 ===。僅當判斷 null 或 undefined 時，容許使用 == null

19.字符串開頭和結束使用單引號 '。

1. 輸入單引號不須要按住 shift，方便輸入。
2. 實際使用中，字符串常常用來拼接 HTML。爲方便 HTML 中包含雙引號而不須要轉義寫法。

         如：var html = '<div class="cls">拼接HTML能夠省去雙引號轉義</div>';

20.使用對象字面量 {} 建立新 Object

    對象建立時，若是一個對象的全部 屬性 都可以不添加引號，建議全部 屬性 不添加引號；對象建立時，若是任何一個 屬性 須要添加引號，則全部 屬性 建議添加 '

   

21.不容許修改和擴展任何原生對象和宿主對象的原型

   

22.使用數組字面量 [] 建立新數組，除非想要建立的是指定長度的數組；遍歷數組不使用 for in

23.自定義事件的 事件名 必須全小寫：儘可能避免使用 eval 函數、儘可能不要使用with、減小 delete 的使用

24.DOM操做，儘可能減小頁面 reflow。

     頁面 reflow 是很是耗時的行爲，很是容易致使性能瓶頸。下面一些場景會觸發瀏覽器的reflow：

• DOM元素的添加、修改（內容）、刪除。
• 應用新的樣式或者修改任何影響元素佈局的屬性。
• Resize瀏覽器窗口、滾動頁面。
• 讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 。