對于正在從事Web前端開工作的人來說，了解Web前端開發規范是很重要的.因為只有這樣才能保證高效快速的完成工作，今天小千就來和大家分享一下新手初學Web前端需要注意的Web前端開發規范有哪些！希望對小伙伴們有所幫助。

一、CSS書寫規范

1.編碼統一為utf-8；

2.協作開發及分工：i會根據各個模塊，同時根據頁面相似程序，事先寫好大體框架文件，分配給前端人員實現內部結構&表現&行為；共用css文件base.css由i書寫，協作開發過程中，每個頁面請務必都要引入，此文件包含reset及頭部底部樣式，此文件不可隨意修改；

3.class與id的使用：id是唯一的并是父級的，class是可以重復的并是子級的，所以id僅使用在大的模塊上，class可用在重復使用率高及子級中；id原則上都是由我分發框架文件時命名的，為JavaScript預留鉤子的除外；

4.為JavaScript預留鉤子的命名，請以 js_ 起始，比如：js_hide，js_show；

5.class與id命名：大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名，其他樣式名稱由小寫英文 & 數字 & _ 來組合命名，如i_comment，fontred，width200； 避免使用中文拼音，盡量使用簡易的單詞組合； 總之，命名要語義化，簡明化。

6.規避class與id命名(此條重要，若有不明白請及時與i溝通):

a) 通過從屬寫法規避；

b)取父級元素id/class命名部分命名；

c)重復使用率高的命名，請以自己代號加下劃線起始，比如i_clear；

d)a,b兩條，適用于在2中已建好框架的頁面，如，要在2中已建好框架的頁面代碼中加入新的div元素。

7.css屬性書寫順序，建議遵循：布局定位屬性–>自身屬性–>文本屬性–>其他屬性. 此條可根據自身習慣書寫，但盡量保證同類屬性寫在一起；

8.書寫代碼前，考慮并提高樣式重復使用率；

9.充分利用html自身屬性及樣式繼承原理減少代碼量；

10.樣式表中中文字體名，請務必轉碼成unicode碼，以避免編碼錯誤時亂碼；

11.背景圖片請盡可能使用sprite技術，減小http請求，考慮到多人協作開發，sprite按模塊制作；

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；} table th，table td{padding:0；}，base.css文件中我會初始化表格樣式)；

13.如果可以請少使用兼容；

14.用png圖片做圖片時，要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果，請為ie6單獨定義背景；

15.避免兼容性屬性的使用，比如text-shadow || css3的相關屬性；

16.減少使用影響性能的屬性，比如position:absolute || float ；

17.必須為大區塊樣式添加注釋，小區塊適量注釋；

18.代碼縮進與格式：建議單行書寫，可根據自身習慣，后期優化會統一處理；

二、JavaScript書寫規范

1.文件編碼統一為utf-8，書寫過程，每行代碼結束必須有分號； 原則上所有功能均根據XXX項目需求原生開發，以避免網上down下來的代碼造成的代碼污染(沉冗代碼||與現有代碼沖突|| …)；

2.庫引入：原則上僅引入jQuery庫，若需引入第三方庫，須與團隊其他人員討論決定；

3.變量命名：駝峰式命名. 原生JavaScript變量要求是純英文字母，首字母須小寫；

4.類命名：首字母大寫，駝峰式命名. 如 ITaoLun；

5.函數命名：首字母小寫駝峰式命名. 如iTaoLun()；

6.命名語義化，盡可能利用英文單詞或其縮寫；

7.盡量避免使用存在兼容性及消耗資源的方法或屬性；

8.后期優化中，JavaScript非注釋類中文字符須轉換成unicode編碼使用，以避免編碼錯誤時亂碼顯示；

9.代碼結構明了，加適量注釋. 提高函數重用率；

10.注重與html分離，減小reflow，注重性能.

以上就是小千今天為大家分享的新手初學Web前端應該知道的一些開發規范，希望本篇文章能夠對正在從事Web前端工作的小伙伴們有所幫助。

本文來自千鋒教育，轉載請注明出處。

總結

以上是生活随笔為你收集整理的汇总Web前端开发工程师需要注意的一些开发规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。