1、文件名规范,建议用小写字母加中横线的方式
2、属性书写顺序,从外到内,直接影响盒子模型和位置盒子的属性文本属性css3或者其他属性。这是为了方便修改代码的时候能直接找到,还有代码的优先级
3、选择器的性能,写sass或者less不要套太多层,不然会出现匹配时间变长,代码的可读性也比较差
4、避免选择器误选,维护的时候对尽量定个选择器的具体位置和名称,防止和别的样式起冲突
5、少用!important
6、多写注释,方便后期维护寻找代码
7、排版规范,把编辑器table缩进调成4个空格,这样是方便观察代码,同时也美观,没有2个空格那种紧凑感
8、属性值规范,值为0的时候,后面通常不带单位颜色用十六进制,少用rgb(rgb是函数,需要计算转换),如果要透明度那就再用rgba,颜色如果是留个相同的数字或者英文,可以简写成3个
9、不要设置太大的z-index
10、合并属性,例如margin-top,margin-bottom,margin-left,margin-right,这四个属性可以合成一个margin: top right bottom left。让代码看起来简洁
11、 注意float/absolute/fixed定位会强制设置成block
12、清楚浮动 .clearfix:after,一般用这个方法,也有其他可以自己去看看
13、图片压缩,拿到图片的时候要检查下图片的大小,不能用太大的图,影响加载速度,要压缩,图片控制在300k以内
领取专属 10元无门槛券
私享最新 技术干货