编写高质量代码 Web前端开发修炼之道 书摘精要
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条件注释法