前端書寫規范

==注重結構、表現、行為分離==

1. html結構

1. 統一為html5聲明類型<!DOCTYPE html>; 編碼統一為<meta charset="utf-8" /> 
2.不允許寫行內樣式與內聯樣式表;
3.css引入統一放入</head>前;
4.javascript引入建議統一放入</body>前;
5.頁面公用樣式統一放入reset.css中,分別引入;獨用樣式,按需引入。
6.代碼縮進,使用Tab鍵實現層次分明的縮進;
7.標簽必須小寫,合理關閉。
8.所有的標簽必須合理嵌套,注重語義化。
9.自定義屬性推薦使用 data-;布爾類型的屬性,建議不添加屬性值。
9.屬性名必須使用小寫字母,用雙引號包圍。
10.表單:必須為含有描述性表單元素(input, textarea)添加label。使用 button 元素時必須指明 type 屬性值。盡量不要使用按鈕類元素的 name 屬性。
11.圖片:禁止 img 的 src 取值為空。避免為 img 添加不必要的 title 屬性。為重要圖片添加 alt 屬性。 添加 width 和 height 屬性,以避免頁面抖動。

2. css表現

1.(禁止)將樣式寫為單行
2. 省略“0”值后面的單位。不要在0值后面使用單位,除非有值。
3. 不要在CSS中使用expression
4.(禁止)使用css原生@import
5. 不要在CSS中使用!important
6.(不推薦)ie使用filter,( 禁止)使用expression
7. 使用after或overflow的方式清浮動
8. 去掉小數點 0
9.每個樣式屬性后加 ";"
10.避免瀏覽器hacks
11Class命名中(禁止)出現大寫字母,(必須)采用“- ”對class中的字母分隔
12.ID和class(類)命名應反應元素目的和用途的名稱,或其他通用名稱。代替表象和晦澀難懂的名稱。
13.盡可能使用縮寫屬性,如padding,margin,background,font。
14.URI值(url())不要使用引號。
15.刪除空屬性及注釋后的無效屬性。
16.書寫順序:顯示屬性,元素位置,元素屬性,元素內容屬性

3. JavaScript

1.(禁止)使用eval,有注入風險,尤其是ajax返回數據,效率低,
2. 除了三目運算,if,else等(禁止)簡寫
3. 當需要緩存this時必須使用變量進行緩存
4. 左花括號置于行末,右花括號置于行首。
5. 聲明變量,必須var。
4、類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;
5、函數命名: 首字母小寫駝峰式命名. 如iTaoLun();
6、命名語義化, 盡可能利用英文單詞或其縮寫;
7、盡量避免使用存在兼容性及消耗資源的方法或屬性, 比如eval_r() & innerText;
8、后期優化中, JavaScript非注釋類中文字符須轉換成unicode編碼使用, 以避免編碼錯誤時亂碼顯示;
9、代碼結構明了, 加適量注釋. 提高函數重用率;
10、注重與html分離, 減小reflow, 注重性能.
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容