前端編碼規範小記

 

一  如今的前端 編碼比以前容易了好多

1  有flex佈局，能夠很方便的 佈局出複雜的佈局(以前div,css,float,僞類等 仍是挺麻煩的) 

2 有es6語法糖  ，各類數據處理函數自帶的，很方便。（以前都是純js 寫方法）

 

 

二   css屬性順序規範

建議相關的屬性說明放在一組，並按照下面的順序排列：

 1 css

定位（position、left、right、top、bottom、z-index）

盒子模型（display、float、width、height、margin、padding、border、border-radius）

排印（font、color、background、line-height、text-align）

因爲定位能夠從正常的文檔流中移除元素，而且還能覆蓋盒模型相關的樣式，所以排在首位。而盒模型決定了組件的尺寸和位置，因此排第二位。排印只是影響元素的細節樣式變化，因此放第三位。

 

 

三  html屬性順序規範

HTML 屬性應該按照特定的順序出現以保證易讀性，並且一致的屬性順序可能提高 1.5% 的 gzip 壓縮率

class

id, name

data-*

...

Classes 是爲高可複用組件設計的，因此他們處在第一位。Ids 更加具體並且應該儘可能少使用（例如, 頁內書籤），因此他們處在第二位。