前端编码规范小记

 

一  如今的前端 编码比以前容易了好多

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 更加具体并且应该尽可能少使用（例如, 页内书签），因此他们处在第二位。