编写高质量前端代码

### 高质量的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来书写样式,利于重用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,001评论 25 709
  • 留住好员工看似困难,实则非然,很多管理者犯下的大多数错误都是可以避免的,但一旦管理者犯下了错,最出色的员工往往最先...
    中恩国际连金锋阅读 408评论 0 1
  • “行动吧,遇见更好的自己” 日子在指尖流过,一转眼我已经五个月没有工作了,该休息的已经休息的差不多,该思考的却始终...
    SuperVicky阅读 215评论 0 0
  • “妈,你出来,我好像闻到了春的气息.........”在厨房里忙碌的我,抬起疲倦的头。愣在那里,只见女儿的脸上闪烁...
    紫草茵茵阅读 372评论 0 2
  • 你匆匆地走在路上,时光狂流一般的流过身旁。还没与春天的蔷薇话别,又去赴秋日落叶的约。 你总是在不停的奔走,时光也跟...
    龙江石阅读 252评论 5 8

友情链接更多精彩内容