编写高质量前端代码

高质量的HTML代码

  1. 做到标签的语义化,不过度使用div而忽略一些其他的具有语义化的标签,例如标题就用h标签,内容就用p标签,等等,这些无论对搜索引擎的优化还是代码的可读性都有好处。

  2. 要做到页面即使去掉CSS,也具有良好的可读性结构。

高质量的CSS代码

  1. 对于高度复用部分,通用类以及特异化部分可以分别放到各自的CSS中,如通用类(css-reset.css),复用类(public.css),特定页面(pagename.css)

  2. 书写模块化的CSS对于结构相同的部分可以书写模块化的样式,对于其在特异位置的差别可以组合特异类名来重写添加部分样式已适应环境。

  3. 类命名方式采用语义清晰地英文单词或者组合词,可用驼峰形式书写或者以“-”来间隔词语,我一般的做法是一个模块的父级类名用“-”,而其内部元素的类名用下划线。在多人配合的情况下,可在类名前加上名字缩写,以避免发生命名冲突。

  4. 使用多类名组合的方式来书写或修改模块通用的CSS样式,可以解决代码的冗余,并且易于维护

  5. 使用雪碧图减少服务器压力,优化背景图加载切换的时间

  6. 一般情况下尽量使用class,少用id来书写样式,利于重用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值