前端小白基础之CSS部分编码规范

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以内

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180823A13G7000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券