### 高质量的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来书写样式,利于重用
编写高质量前端代码
发表于:2017-01-09
作者:网络转载
来源:
- 周排行
- 月排行
- 评论排行
-   质量管理:如何找到质量问题的真正原...
-   QA真正的作用是什么?
-   搜索质量评测操作简介
-   如何提高员工的质量意识?
-   小论关于质量的想法
-   最常见的34个敏捷测试面试的Q&A(上)
-   如何有效提升软件测试质量?
-   搜索质量评测操作简介
-   QC在质量管理中的作用
-   软件质量标准与测试依据和规范
-   质量管理:如何找到质量问题的真正原...
-   如何有效提升软件测试质量?
-   QA真正的作用是什么?
-   关于进度与质量问题的解决方案
-   从软件出发,非功能测试思考总结
-   展望2017,谁是网络技术头牌?
-   C/C++单元测试工具Visual Unit 4 介绍
-   国内外最好用的6款Bug跟踪管理系统
-   性能测试指标评估必读
-   百度软件测试方案模板
-   38张史上最全的IT工程师技能图谱
-   C/C++单元测试工具Visual Unit 4 介绍
-   2019年,你会选哪些安全测试工具?
-   十款Web服务器性能压力测试工具
-   软件测试入门指南:周期、模型和文档化
-   记自动化测试成神学习之路
-   软件测试全景图 -最全的思维导图