Web前端作為開發團隊中不可或缺的一部分，需要按照相關規定進行合理撰寫（一部分不良習慣可能給自己和他人造成不必要的麻煩），不同公司不同團隊具有不同的規范和檔案，下面是根據不同企業和團隊的要求進行全面詳細的整理結果，備注：實際開發請以本公司的規范為標準，
A.基本原則
符合web標準（UTF-8，HTML5），語意化html（HTML5新增要求，減少div和span等無特定語意的標簽使用），結構表現行為分離（HTML-CSS-JS代碼分離，不同行為代碼高內聚低耦合），兼容性優良（早期版本瀏覽器兼容，移動端和PC端設備兼容）.頁面性能方面（減少請求次數，例如使用精靈圖和sass語法），代碼要求簡潔明了有序，盡可能的減小服務器負載，保證最快的決議速度（減小repaint和reflow）.
B.檔案命名規范
1、html，css，js，lib，images檔案均存放至專案的目錄中，如果使用相關前端框架，根據框架的檔案格式進行合理布局，
2、所有檔案夾及檔案使用英文命名（避免使用中文路徑），
3、html檔案：入口檔案使用index.html，如果有對應的設計組設計原稿，需要將對應的設計稿和html檔案命名一致并合理存放，
4、css檔案命名：后綴.css，通用initial.css，初始化base.css，首頁index.css，其他頁面按照對應的html命名，
5、Js檔案命名：英文命名，后綴.js.通用common.js，初始化base.js， 其他頁面按照對應的html命名，
自己是一個五年的前端工程師
這里推薦一下我的前端學習交流qq群： 851231348，里面都是學習前端的，如果你想制作酷炫的網頁，想學習編程，從最基礎的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小伙伴，有想學習web前端的，或是轉行，或是大學生，還有作業中想提升自己能力的，正在學習的小伙伴歡迎加入，
C.HTML規范
1、檔案型別宣告及編碼：統一為html5宣告型別，書寫時利用IDE實作層次分明的縮進（默認縮進4空格），
2、非特殊情況下CSS檔案放在body部分標簽后，非特殊情況下大部分JS檔案放在標簽尾部（如果需要界面未加載前執行的代碼可以放在head標簽后）避免行內JS和CSS代碼，
3、所有編碼需要遵循html（XML）標準，標簽&屬性&屬性命名必須由小寫字母及下劃線數字組成，且所有標簽必須閉合，包括br()，hr()等，屬性值用雙引號，
4、引入JS庫檔案，檔案名須包含庫名稱及版本號及是否為壓縮版，比如jquery-1.4.1.min.js，引入插件，檔案名格式為庫名稱+插件名稱，比如jQuery.bootstrap.js，
5、書寫頁面程序中，請考慮向后擴展性，class&id參見css書寫規范.
6、需要為html元素添加自定義屬性的時候，首先要考慮下有沒有默認的已有的合適標簽去設定，如果沒有，可以使用須以"data-"為前綴來添加自定義屬性，避免使用"data："等其他命名方式，
7、語意化html，如標題根據重要性用h*(同一頁面只能有一個h1)，段落標記用p，串列用ul，行內元素中不可嵌套塊級元素，
8、盡可能減少div多層級嵌套，
9、書寫鏈接地址時，必須避免重定向，例如：href="https://www.cnblogs.com/lyy-1/p/http：//myVue.com/"，即須在URL地址后面加上“/”；
10、在頁面中盡量避免使用style屬性，即style="…"，
11、必須為含有描述性表單元素(input，textarea)添加label，如姓名：須寫成：姓名：
12、能以背景形式呈現的圖片，盡量寫入css樣式中，
13、重要圖片必須加上alt屬性，給重要的元素和截斷的元素加上title，
14、給區塊代碼及重要功能(比如回圈)加上注釋，方便后臺添加功能，
15、特殊符號使用：盡可能使用代碼替代：比如<(<)&>(>)&空格()&?(?)等等，
D.CSS規范
1、編碼規范為utf-8，
2、協作開發及分工：i會根據各個模塊，同時根據頁面相似程式，事先寫**體框架檔案，分配給前端人員實作內部結構&表現&行為，共用css檔案base.css由i書寫，協作開發程序中，每個頁面請務必都要引入，此檔案包含reset及頭部底部樣式，此檔案不可隨意修改，
3、class與id的使用：id是唯一的并是父級的，class是可以重復的并是子級的，所以id僅使用在大的模塊上，class可用在重復使用率高及子級中，id原則上都是由我分發框架檔案時命名的，為JS預留鉤子的除外，
4、為JS預留鉤子的命名，請以js_起始，比如：js_hide，js_show，
5、class與id命名：大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式名稱由小寫英文&數字&來組合命名，如i_comment，fontred，width200，避免使用中文拼音，盡量使用簡易的單詞組合，總之，命名要語意化，簡明化
6、規避class與id命名(此條重要，若有不明白請及時與i溝通)：a）通過從屬寫法規避，示例見d，b）取父級元素id/class命名部分命名，示例見d，c）重復使用率高的命名，請以自己代號加下劃線起始，比如i_clear，d）a，b兩條，適用于在2中已建好框架的頁面，如，要在2中已建好框架的頁面代碼中加入新的div元素，按a命名法則：...，樣式寫法：#mainnav.firstnav{.......}按b命名法則：...，樣式寫法：.main_firstnav{.......}
7、css屬性書寫順序，建議遵循：布局定位屬性-->自身屬性-->文本屬性-->其他屬性.此條可根據自身習慣書寫，但盡量保證同類屬性寫在一起.屬性列舉：布局定位屬性主要包括：display&list-style&position（相應的top，right，bottom，left）＆float&clear＆visibility＆overflow；
自身屬性主要包括：width&height&margin&padding&border&background，
文本屬性主要包括：color&font&text-decoration&text-align&vertical-align&white-space&
其他&content，
8、書寫代碼前，提高樣式重復使用率，
9、充分利用html自身屬性及樣式繼承原理減少代碼量，例如：
即可實作日期居右顯示
ul.list li {
position：relative
}
ul .list li span {
position：absolute；right：0
}
10、樣式表中中文字體名，請務必轉碼成unicode碼，以避免編碼錯誤時亂碼，
11、背景圖片請盡可能使用精靈圖技術，減小http請求，考慮到多人協作開發，精靈圖按模塊制作，
12、使用table標簽時(盡量避免使用table標簽)，請不要用width/height/cellspacing/cellpadding等table屬性直接定義表現，應盡可能的利用table自身私有屬性分離結構與表現，如thead，tr，th，td，tbody，tfoot，colgroup，scope，(cellspaing及cellpadding的css控制方法：table{border：0，margin：0，border-collapse：collapse，}tableth，tabletd{padding：0，}，base.css檔案中我會初始化表格樣式)
13、杜絕使用兼容ie8，
14、用png圖片做圖片時，要求圖片格式為png-8格式，若png-8實在影響圖片質量或其中有半透明效果，請為ie6單獨定義背景：_background：none，_filter：progid：DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop，src=https://www.cnblogs.com/lyy-1/p/’img/bg.png’)，
15、避免兼容性屬性的使用，比如text-shadow||css3的相關屬性，
16、減少使用影響性能的屬性，比如position：absolute||float，
17、必須為大區塊樣式添加注釋，小區塊適量注釋，
18、代碼縮進與格式：建議單行書寫，可根據自身習慣，后期優化會統一處理，
E. JS書寫規范
1、檔案編碼統一為utf-8，書寫程序過，每行代碼結束必須有分號，原則上所有功能均根據XXX專案需求原生開發，以避免網上down下來的代碼造成的代碼污染(沉冗代碼||與現有代碼沖突||...)，
2、庫引入：原則上僅引入jQuery庫，若需引入第三方庫，須與團隊其他人員討論決定，
3、變數命名：駝峰式命名.原生JS變數要求是純英文字母，首字母須小寫，如myVue，jQuery變數要求首字符為'_'，其他與原生JS規則相同，如：_myVue，另，要求變數集中宣告，避免全域變數.
4、類命名：首字母大寫，駝峰式命名.如MyVue，
5、函式命名：首字母小寫駝峰式命名.如myVue()，
6、命名語意化，盡可能利用英文單詞或其縮寫，
7、盡量避免使用存在兼容性及消耗資源的方法或屬性，比如eval_r()&innerText，
8、后期優化中，JS非注釋類中文字符須轉換成unicode編碼使用，以避免編碼錯誤時亂碼顯示，
9、代碼結構明了，加適量注釋.提高函式重用率，
10、注重與html分離，減小reflow，注重瀏覽器性能.
F.圖片規范
1、所有頁面元素類圖片均放入img檔案夾，測驗用圖片放于demo檔案夾，
2、圖片格式gif/png/jpg，提倡使用webp檔案格式，使用軟體進行圖片壓縮，
3、命名全部用小寫英文字母||數字||_的組合，其中不得包含漢字||空格||特殊字符；盡量用易懂的詞匯，便于團隊其他成員理解，另，命名分頭尾兩部分，用下劃線隔開，比如ad_left01.gif||btn_submit.gif，
4、在保證視覺效果的情況下選擇最小的圖片格式與圖片質量，以減少加載時間，5、盡量避免使用半透明的png圖片(若使用，請參考css規范相關說明)，
6、運用css精靈圖技術集中小的背景圖或圖示，減小頁面http請求，但注意，請務必在對應的精靈圖psd源圖中劃參考線，并保存至img目錄下
G.測驗規范
開發及測驗工具約定建議使用Aptana-Sublime-Vim-WebStrom，亦可根據自己喜好選擇，但須遵循如下原則：
1、不可利用IDE的視圖模式'畫'代碼，
2、不可利用IDE生成相關功能代碼，
3、編碼必須格式化，比如縮進，測驗工具：前期開發僅測驗FireFox&IE6&IE7&IE8，后期優化時加入Opera&Chrome&Safari，建議測驗順序：FireFox-->IE-->Opera-->Chrome-->Safari，
自己是一個五年的前端工程師
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/14807.html
標籤：Html/Css