從事web前端開發(fā)工作我們就需要了解web前端開發(fā)的規(guī)范覆履，這樣才能保證web前端開發(fā)工程師們可以高效快速的完成工作涝动，本篇文章小編和大家分享一下web前端開發(fā)工程師需要注意的web前端開發(fā)規(guī)范有哪些柳恐，希望對(duì)小伙伴們有所幫助右核。
web前端開發(fā)工程師需要注意的web前端開發(fā)規(guī)范有哪些
這里還是要推薦下小編的web前端學(xué)習(xí)群:867726593甘桑，不管你是小白還是大牛绘证，小編我都?xì)g迎缩抡，不定期分享干貨奠宜，包括 小編自己整理的一份最新的web前端資料和0基礎(chǔ)入門教程，歡迎初學(xué)和進(jìn) 階中的小伙伴瞻想。在不忙的時(shí)間我會(huì)給大家解惑压真。
一、css書寫規(guī)范
1. 編碼統(tǒng)一為utf-8;
2. 協(xié)作開發(fā)及分工: i會(huì)根據(jù)各個(gè)模塊, 同時(shí)根據(jù)頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實(shí)現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為; 共用css文件base.css由i書寫, 協(xié)作開發(fā)過程中, 每個(gè)頁面請(qǐng)務(wù)必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
3. class與id的使用: id是唯一的并是父級(jí)的, class是可以重復(fù)的并是子級(jí)的, 所以id僅使用在大的模塊上, class可用在重復(fù)使用率高及子級(jí)中; id原則上都是由我分發(fā)框架文件時(shí)命名的, 為JavaScript預(yù)留鉤子的除外;
4. 為JavaScript預(yù)留鉤子的命名, 請(qǐng)以 js_ 起始, 比如: js_hide, js_show;
5. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統(tǒng)一命名蘑险，其他樣式名稱由小寫英文 & 數(shù)字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化滴肿。
6. 規(guī)避class與id命名(此條重要, 若有不明白請(qǐng)及時(shí)與i溝通):
a) 通過從屬寫法規(guī)避;
b)取父級(jí)元素id/class命名部分命名;
c)重復(fù)使用率高的命名, 請(qǐng)以自己代號(hào)加下劃線起始, 比如i_clear;
d)a,b兩條, 適用于在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼中加入新的div元素。
7. css屬性書寫順序, 建議遵循: 布局定位屬性–>自身屬性–>文本屬性–>其他屬性. 此條可根據(jù)自身習(xí)慣書寫, 但盡量保證同類屬性寫在一起漠其；
8. 書寫代碼前, 考慮并提高樣式重復(fù)使用率;
9. 充分利用html自身屬性及樣式繼承原理減少代碼量嘴高；
10. 樣式表中中文字體名, 請(qǐng)務(wù)必轉(zhuǎn)碼成unicode碼, 以避免編碼錯(cuò)誤時(shí)亂碼;
11. 背景圖片請(qǐng)盡可能使用sprite技術(shù), 減小http請(qǐng)求, 考慮到多人協(xié)作開發(fā), sprite按模塊制作;
12. 使用table標(biāo)簽時(shí)(盡量避免使用table標(biāo)簽), 請(qǐng)不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現(xiàn), 應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn) , 如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文件中我會(huì)初始化表格樣式)；
13. 如果可以請(qǐng)少使用兼容;
14. 用png圖片做圖片時(shí), 要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果, 請(qǐng)為ie6單獨(dú)定義背景和屎；
15. 避免兼容性屬性的使用, 比如text-shadow || css3的相關(guān)屬性;
16. 減少使用影響性能的屬性, 比如position:absolute || float ;
17. 必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;
18. 代碼縮進(jìn)與格式: 建議單行書寫, 可根據(jù)自身習(xí)慣, 后期優(yōu)化會(huì)統(tǒng)一處理;
二拴驮、JavaScript書寫規(guī)范
1. 文件編碼統(tǒng)一為utf-8, 書寫過程, 每行代碼結(jié)束必須有分號(hào); 原則上所有功能均根據(jù)XXX項(xiàng)目需求原生開發(fā), 以避免網(wǎng)上down下來的代碼造成的代碼污染(沉冗代碼 || 與現(xiàn)有代碼沖突 || …);
2. 庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團(tuán)隊(duì)其他人員討論決定;
3. 變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫;
4. 類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;
5. 函數(shù)命名: 首字母小寫駝峰式命名. 如iTaoLun();
6. 命名語義化, 盡可能利用英文單詞或其縮寫;
7. 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩?
8. 后期優(yōu)化中, JavaScript非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用, 以避免編碼錯(cuò)誤時(shí)亂碼顯示;
9. 代碼結(jié)構(gòu)明了, 加適量注釋. 提高函數(shù)重用率;
10. 注重與html分離, 減小reflow, 注重性能.
