前端開發規範集錦

如下是我我的整理的一些前端開發規範，各位前端工程師日常沒事的時候能夠看看，爭取都用在本身開發的項目上，固然這些腦殘的IE也都是支持的。

1、html規範

1.符合web2.0標準，語義化html，結構、表現、行爲三層分離，兼容性優良，代碼簡潔明瞭有序，儘量的減小服務器負載，快速的解析速度。

2.正確使用塊級元素和內聯元素嵌套，h一、h二、h三、h四、h五、h六、P、dt標籤不能包含div等塊級元素，只能包含內聯元素，li能夠嵌套div,ul,ol等塊級元素，內聯元素中不可嵌套塊級元素。

3.正確使用<ul><li> 無序列表（在文章列表、導航條，下拉列表、tab使用）、<ol><li> 有序列表（文章列表等根據須要使用）、<dl><dt>（自定義列表）。

4.加粗使用<strong>標籤， 表示關鍵詞強調的語義化，有助於SEO。

5. 不建議使用<br/>，用margin進行控制。

6.p標籤訂義段落,用來區分段落，有語義化的，文章正文使用p標籤是理所固然的，推薦在文章或者文本段落之外的地方儘可能少用P標籤，不宜用來大範圍的佈局。

7. 標題要用h*(同一頁面只能有一個h1)。

8.標籤、屬性、屬性命名必須由小寫字母及下劃線數字組成，且全部標籤必須閉合，包括單標籤。

9.儘量減小div多層嵌套。

10.在html頁面中儘可能避免直接使用行內樣式來控制標籤樣式，作到內容與表現分離。

11.多餘代碼, 好比頁面註釋掉不須要的代碼，應該堅定刪除掉。

12.指定img明確的寬度和高度，能夠增長頁面渲染速度。

2、css規範

1.圖片儘可能使用css寫入樣式中。

2. 背景圖片請儘量使用sprite技術，減少http請求。

3.連接的樣式請嚴格按照：a:link -> a:visited -> a:hover -> a:active（LVHA）的順序寫。

4.合併margin、padding、border的設置，儘可能使用縮寫法，好比margin:0 10px 0 10px;

5.選擇器應該在知足功能的基礎上儘可能簡短，減小選擇器嵌套，查詢消耗，可是必定要避免覆蓋全局樣式設置。

6.若是沒有邊框時，不要寫成 border:0，應該寫成 border:none。

7.在保持代碼解析的前提下，儘可能合併重複的樣式，例如：a { display:block }  span{ display:block }   合併：a,span { display:block }。

8.background、font 等能夠縮寫的屬性，儘可能使用縮寫形式

background: color image repeat attachment position;

font: style weight size/lineHeight family;

9.不要直接爲html標籤添加css樣式，好比div {width: 100px;｝

10.儘可能少用hack，能不hack就儘可能不用hack，爲了兼容必須須要時就使用。

11.爲了SEO和頁面可用性，請使用text-indent來隱藏文本內容。

12.不要在 html 中加入標籤來清除浮動，經過在浮動元素的父元素上添加.clearfix 來清除浮動：
.clearfix:dfter{content:」.」; display:block;height:0;visibility:hidden;clear:both;}
.clearfix{zoom:1}

13.字體名稱最好映射成對應的英文名，例如：黑體(SimHei) 宋體(SimSun) 微軟雅黑(Microsoft Yahei);

14.css屬性書寫順序, 建議遵循佈局定位屬性–>自身屬性–>文本屬性–>其餘屬性. 此條可根據自身習慣書寫，但儘可能保證同類屬性寫在一塊兒。屬性列舉：
佈局定位屬性主要包括： float、clear、position、top、right、bottom、left、display、visibility、overflow等；
自身屬性主要包括：width、height、margin、padding、background、border；
文本屬性主要包括：font、color、text-align、vertical-align、text-decoration、text-indent、white-space等；
其餘屬性包括：list-style、cursor、 z-index、zoom等。

15.不須要重複定義可繼承的值，css中，子元素自動繼承父元素的屬性值，如顏色、字體等，已經在父元素中定義過的，在子元素中能夠直接繼承，不須要重複定義，除非是爲了更變當前元素樣式不使用父元素的屬性值，可是要注意，瀏覽器可能用一些默認值覆蓋你的定義。

16.用png圖片作圖片時，要求圖片格式爲png-8格式,若png-8實在影響圖片質量或其中有半透明效果，請爲ie6單獨定義背景：
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

3、javascript規範

1.js每行代碼結束時必須有分號;

2.引用js庫文件，文件須包含庫名稱及版本號，以及是否爲壓縮版，好比jquery.1.81.min.js；引用插件，文件名爲庫名+插件名稱，好比jquery.cookie.js。

3.變量和函數命名: 駝峯式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如myName。

4.避免全局變量。

5.命名語義化, 儘量利用英文單詞或其縮寫。

6.頁面引用js文件和js代碼放在html代碼的最底部。

4、圖片使用規範

1.圖片格式僅限於gif、png、jpg。

2.若是背景圖片有動畫，則保存成 gif，若是沒有動畫，也沒有半透明效果，則保存成jpg。

3.若是有半透明效果，則保存成 png-24，但儘可能避免使用半透明的png圖片。

4.重要圖片必須加上alt屬性，給重要的元素和截斷的元素加上title。

5.命名所有用小寫英文字母、數字、和橫線的組合，儘可能用易懂的詞彙，便於團隊其餘成員理解，命名分頭尾兩部分， 用下劃線隔開， 好比ad-left01.gif、btn-submit.jpg。

6.在保證視覺效果的狀況下選擇最小的圖片格式與圖片質量, 以減小加載時間。

7.運用css sprite技術集中小的背景圖或圖標, 減少頁面http請求。

5、註釋規範

1.html註釋: 註釋格式 <!–這兒是註釋–>, ’–’只能在註釋的始末位置,不可置入註釋文字區域;

2.css註釋: 
單行註釋： /*中文說明*/
有修改者模塊註釋： /* module: module by lingdu 2014-07-30 */

3.JavaScript註釋, 單行註釋使用:  //這兒是單行註釋多行註釋使用:  /* 這兒有多行註釋 */