Web前端开发如何编写高质量代码

这篇文章将为大家详细讲解有关Web前端开发如何编写高质量代码，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司专注于天柱网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供天柱营销型网站建设，天柱网站制作、天柱网页设计、天柱网站官网定制、重庆小程序开发服务，打造天柱网络公司原创品牌,更为您提供天柱网站排名全网营销落地服务。

(P4)
Web标准由一系列标准组合而成，其核心理念是将网页的结构、样式和行为分离开来，所以它可以分为三大部分：结构标准、样式标准和行为标准。
样式标准 —— XML标准、XHTML标准、HTML标准；
样式标准 —— CSS标准；
行为标准 —— DOM标准和 ECMAscript 标准；

(P23)CSS布局也就是俗称的 Div + CSS 布局，或者是 (X)HTML + CSS 布局。其核心思想就是用 CSS 来控制网页中元素的样式，包括位置、大小、颜色等；

(P26)
CSS布局只是Web标准的一部分。在HTML、CSS、Javascript 这三大元素中，HTML才是最重要的，结构才是重点，样式是用来修饰结构的；

先确定 HTML ，确定语义的标准，再来选用合适的 CSS；

(P27) 浏览器会根据标签的语义给定一个默认的样式；

(P29) Web Developer —— 网页调试插件

(P43) 在语义不明显，既可以用

也可以用

的地方，尽量用

，因为

默认情况下有上下间隔，去样式后的可读性更好，对兼容特殊终端有利；

(P46)
如果漏写 DTD 声明， Firefox 仍然会按照标准样式来解析网页，但在 IE 中（包括 IE6、IE7、IE8）就会触发怪异模式；

一种组织 CSS 的方法 —— base.css + common.css + page.css

(P58) 模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将它们提取出来，拆成一个独立的模块；

(P60) 模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性；

(P71) HTML 标准的 class 属性和 id 属性不同，id 只能挂一个，而 class 可以挂多个，用空格分隔；

(P81) 如果不确定模块的上下 margin 特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下 margin 挂用于边框的原子类；

(P81) 权重的规则是这样的 —— HTML标签的权重是1，class 的权重是10，id 权重是100；

(P82) 如果 CSS 选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式 —— “就近原则”指的是选择符定义的先后顺序，而不是 class 名的先后顺序；

(P84) 为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低；

(P85) 少使用子选择器，就需要多添加 class ；

(P87) CSS Sprite “图片翻转技术” —— 将多张图片合并为一张，然后利用 background-position 属性来展示需要的部分；

(P88) 是否使用 CSS Sprite 主要取决于网站流量；

(P89) 一般情况下，建议尽量使用 class ，少用 id ；

(P93)
CSS hack ——
1. IE条件注释法