作為開發(fā)團隊不可或缺的一部分，必須根據相關規(guī)定合理編寫Web前端（某些不良習慣可能會給您自己和他人造成不必要的麻煩）。 不同的公司和不同的團隊具有不同的規(guī)格和文檔。 以下是根據不同公司和團隊要求的全面詳細的整理結果。 備注：請按照我公司的規(guī)格進行實際開發(fā)。  

A。 基本原則

符合網絡標準（UTF-8，HTML5），語義html（HTML5的新要求，減少了對非特定語義標簽（例如div和span）的使用）， 分離結構性能和行為（HTML-CSS-JS代碼分離，不同行為代碼的高內聚性和低耦合），兼容出色的性能（與瀏覽器的早期版本兼容，與移動和PC設備兼容）。 在頁面性能方面（減少請求數量，例如使用Sprite圖形和Sass語法），代碼要求簡明，清晰且井井有條，并且盡可能減少了服務器負載。 確保最快的分辨率速度（減少重涂和重排）。

B。 文件命名約定

1，html，css，js，lib，圖像文件全部存儲在項目目錄中。 如果使用相關的前端框架，請根據框架的文件格式進行合理的布局。

2。 所有文件夾和文件均使用英文名稱（避免使用中文路徑）。

3，html文件：使用index.html作為入口文件。 如果存在相應的設計組設計手稿，則相應的設計手稿和html文件必須命名一致并合理存儲。

4，css文件命名：后綴.css。 常規(guī)的initial.css，初始base.css，主頁index.css和其他頁面是根據相應的html命名的。

5。  js文件命名：英文名稱，后綴.js。 普通common.js，初始Base.js。 其他頁面根據相應的html命名。

C.HTML規(guī)范

1。 文檔類型聲明和編碼：統(tǒng)一為html5聲明類型。 編寫時，請使用IDE來實現分層縮進（默認縮進為4個空格）。

2，在非特殊情況下，CSS文件位于正文部分中標記之后。 在非特殊情況下，大多數JS文件都放在標記的末尾（如果可以在未加載接口之前執(zhí)行的代碼可以放在head標記之后），以避免內聯(lián)JS和CSS代碼。

3。 所有編碼都必須遵循h(huán)tml（XML）標準，標簽和屬性以及屬性名稱必須由小寫字母和下劃線組成，并且所有標簽都必須關閉，包括br（），hr（）等。對屬性使用雙引號 價值觀。

4。 導入JS庫文件。 文件名必須包含庫名和版本號，以及是否為壓縮版本，例如jquery-1.4.1.min.js。 導入插件，文件名格式為庫名+插件名，如jQuery.bootstrap.js。

5。 在編寫頁面的過程中，請考慮向后擴展。 有關class＆id，請參閱CSS編寫規(guī)范。

6。 當您需要向html元素添加自定義屬性時，必須首先考慮是否存在默認的現有合適標簽來設置，如果沒有，則可以使用“ data-”作為添加自定義屬性的前綴，避免使用“ data：” 和其他命名方法。

7。 例如，語義html使用h *表示基于重要性的標題（同一頁上只能有一個h1），使用p表示段落標記，使用ul表示列表，而不是內聯(lián)元素嵌套的塊級元素。

8。 盡可能減少div的多層嵌套。

9。 編寫鏈接地址時，必須避免重定向，例如：href =“ http://myVue.com/”，即，必須在URL地址后添加“ /”；

10。 嘗試避免在頁面中使用style屬性，即style =“ ...”。

11。 必須為包含描述性表單的表單元素（輸入，文本區(qū)域）添加標簽，例如name：必須寫為：name：

12，可以在 形式的背景，請嘗試以CSS樣式編寫它們。

13。 重要圖片必須添加alt屬性。 為重要元素和截斷的元素添加標題。

14。 在塊代碼和重要功能（例如循環(huán)）中添加注釋，以利于在后臺添加功能。

15。 特殊符號的使用：盡可能使用代碼替換：如）＆space（）＆?（?）等。

D.CSS規(guī)范

1，編碼規(guī)范為utf-8。

2。 合作開發(fā)和分工：根據每個模塊，同時，按照頁面的類似程序，預先編寫車身框架文件并分配給前端人員，以實現內部結構和性能 和行為。 共享的css文件base.css由i編寫。 在協(xié)作開發(fā)過程中，必須導入每個頁面。 此文件包含重置和頭部底部的樣式。 該文件不能隨意修改。

3。  class和id的使用：id是唯一的，并且是父級，class可以重復并且是子級，因此id僅用于大型模塊中，Class可以用于高復用率和子級別。 原則上，當我分發(fā)框架文件時，將為id命名，但保留給JS的鉤子除外。

4，是J保留掛鉤的名稱，請以js_開頭，例如：js_hide，js_show。

5。 類和ID的命名：大框架名稱（例如header / footer / wrapper / left / right）在2中由i統(tǒng)一命名。其他樣式名稱以小寫英文＆Number＆命名，例如i_comment，fontred，width200。 避免使用中文拼音，并嘗試使用簡單的單詞組合。 簡而言之，命名應在語義上簡潔。

6。 避免使用類和ID命名（這很重要，如果您不了解，請及時與i交流）：a）避免使用下級的編寫規(guī)則，有關示例，請參閱d。  b）命名父元素id / class命名部分，有關示例，請參見d。  c）對于重復率很高的名稱，請以您自己的代碼和下劃線開頭，例如i_clear。   d）a和b的兩項適用于在2中陷害的頁面。例如，要將新的div元素添加到在2中陷害的頁面的代碼，請遵循以下命名規(guī)則：..   。，樣式寫法：＃mainnav.firstnav {.......}根據b命名規(guī)則：...，樣式寫法：.main_firstnav {.......}

7. css屬性的寫入順序，建議遵循：布局定位屬性->自己的屬性->文本屬性->其他屬性。 可以根據您自己的習慣寫這篇文章，但是請嘗試確保將相似的屬性寫在一起。 屬性列表：布局定位屬性主要包括：顯示和列表樣式和位置（對應的頂部，右側，底部，左側）和float＆clear＆visibility＆overflow；

自己的屬性主要包括：width＆height＆margin＆padding＆border＆background。

文本屬性主要包括：color＆font＆text-decoration＆text-align＆vertical-align＆white-space＆

other＆content。

8。在編寫代碼之前，

10。樣式表中的中文字體名稱必須轉碼為unicode。

11。請盡可能將sprite技術用于背景圖片，以減少http請求?？紤]到多人協(xié)作的發(fā)展，sprite圖片

11。/ p>

12。使用表格標簽時（請避免使用表格標簽），請不要使用寬度 / height / cellspacing / cellpadding和其他表屬性直接定義性能，并盡可能使用表自身的私有屬性分隔結構和性能，例如thead，tr，th，td，tbody，tfoot，colgroup，sc 哦 （cellspaing和cellpadding的css控制方法：table {border：0.margin：0.border-collapse：collapse。} tableth，Tabletd {padding：0。}，我將在base.css文件中初始化表格樣式）<  / p>

13。 不要使用兼容的ie8。

14。 將png圖片用作圖片時，圖片格式必須為png-8。 如果png-8確實影響圖像質量或具有半透明效果，請分別為ie6定義背景：_background：none。   _filter：程序：DXImageTransform .Microsoft.AlphaImageLoader（sizingMethod = crop，src ='img / bg.png'）。

15。 避免使用兼容性屬性，例如與text-shadow || css3相關的屬性。

16。 減少使用會影響性能的屬性，例如position：absolute || float。

17。 必須為大塊樣式添加注釋，為小塊樣式添加適當的注釋。

E。  JS編寫標準

1。 文件編碼統(tǒng)一為utf-8。 編寫過程之后，每一行代碼必須以分號結尾。 原則上，所有功能最初都是根據XXX項目的要求開發(fā)的，以避免因Internet上的代碼不足（冗余代碼||與現有代碼|| ...沖突）而導致代碼污染。

2。 庫介紹：原則上僅介紹jQuery庫。 如果需要引入第三方庫，則必須與團隊的其他成員討論該決定。

3。 變量命名：駝峰式命名。 本地JS變量要求使用純英文字母，并且首字母必須小寫，例如myVue。  jQuery變量要求第一個字符為'_'，其他規(guī)則與本機JS相同，例如_myVue。 另外，必須集中聲明變量以避免全局變量。

4。 班級命名：大寫第一個字母，并以駝峰式命名。 例如MyVue。

5。 函數命名：命名第一個字母和小寫的駝峰式大小寫。 如myVue（）。

6。 語義命名，并盡可能使用英語單詞或它們的縮寫。

7。 嘗試避免使用兼容且消耗資源的方法或屬性，例如eval_r（）＆innerText。

8。 在以后的優(yōu)化中，必須將JS非注釋漢字轉換為unicode編碼用于避免編碼錯誤時顯示亂碼。

9。 代碼結構清晰，添加適當的注釋。 提高功能重用率。

10。 注意與html分開，減少回流，并專注于瀏覽器性能。

F。 圖片規(guī)格

1。 所有頁面元素圖片都放置在img文件夾中，而測試圖片則放置在demo文件夾中。

2，圖片格式gif / png / jpg。 建議使用webp文件格式，并使用軟件進行圖像壓縮。

3。 請使用小寫英文字母||數字|| _的組合命名，但不能包含中文字符||空格||特殊字符； 嘗試使用易于理解的詞匯來促進團隊其他成員的理解。 此外，名稱分為兩部分，各部分之間用下劃線分隔，例如ad_left01.gif || btn_submit.gif。

4。 選擇最小的圖像格式和圖像質量，同時確保視覺效果以減少加載時間。  5.盡量避免使用半透明的png圖像（如果使用它們，請參閱CSS規(guī)范的相關說明）。

6。 使用css sprite map技術集中較小的背景圖像或圖標以減少頁面http請求，但請注意，必須在相應的sprite map psd源圖像中繪制參考線，并將其保存到img目錄