编写高质量前端代码——HTML&CSS篇

    最近刚读完《编写高质量代码——Web前端开发修炼之道》，赶紧总结巩固下记忆，也方便平时查阅。

    1、结构、样式和行为分离

        这个不用多说，现在也是这样编码的。在此基础上，还要做到精简、重用、有序。用更少的代码实现更多功能，避免重复编码，经常用的方法写成公共插件，注意代码逻辑。

    2、table布局与CSS布局

        与table布局相比，CSS布局具有代码量少、结构精简、语义清晰等优点。代码量少，浏览器端的下载时间就会更短，语义清晰就会对搜索引擎更友好。

    3、标签语义化

        调试标签语义良好工具——Firefox插件Web Developer。

        不要所有的标签都用div，只有当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现。

        表单语义化：表单域要用fieldset标签包起来，并用legend标签说明表单的用途。就像input要有对应的label，table要有caption、thead、tbody、tfoot一样清晰语义。

    4、高质量的CSS

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

        tip2.类的公共部分越少，类就越容易维护，尽 量将属性和方法设计成私有的。

        tip3.多用组合，少用继承。用组合的方式可以大大减少类的数量。

        CSS reset和通用原子类要写在base.css里面。原子类用于组合样式，常用css重置代码：

        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;} 
  table {border-collapse:collapse;border-spacing:0;} 
  fieldset,img {border:0;} 
  address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;} 
  ol,ul {list-style:none;} 
  caption,th {text-align:left;} 
  h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} 
  q:before,q:after { content:'';} 
  abbr,acronym {border:0;}  

    5、解决IE6双边距bug

        ,fl和.fr这两个类在设置float:left/right之外，还设置display:inline，可以避免挂浮动类时引入bug。

    6、css命名

        “骆驼命名法”用于区别不同单词，“划线”用于表明从属关系。

    7、特殊样式margin

        相邻的margin-left和margin-right不会重合，但相邻的margin-top和margin-bottom会产生重合。所以最好统一只使用margin-top或者margin-bottom，不要混合使用。margin不要写到模块的类里，而是使用类的组合。

    8、CSS的权重

        HTML标签的权重是1，class的权重是10，id的权重是100。

        如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。

        CSS选择符的权重要尽可能低，所以尽量不要使用子选择器，除非确定HTML结构十分稳定。

    9、CSS Sprite（图片翻转技术）

        图片翻转技术将多张图片合并为一张，然后利用background-position属性来展示需要的部分。CSS Sprite技术的好处在于，解决等待加载图片时背景图片出现空白的问题，以及将多张图片合并成一张大图，会大大减少网页的HTTP请求数，减小服务器压力。

        CSS Sprite的坏处在于，降低了开发效率（需要精确测量坐标）和增大维护难度（改动一个小图可能会影响到周围的图片）。

    10、CSS hack

        （1）IE条件注释法

            <!-- [ if IE ] -->

    <link type="type/css" href="test.css" rel="stylesheet" />

    <! [endif] -->

（2）选择符前缀法

            在CSS选择符前加一些只有特定浏览器才能识别的前缀，例如“*html”前缀只对IE6生效，“*+html”前缀只对IE7生效。

（3）样式属性前缀法

hack	示例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)
*	*color	Yes	Yes	Yes	Yes	No	Yes
+	+color	Yes	Yes	Yes	Yes	No	Yes
-	-color	Yes	Yes	No	No	No	No
_	_color	Yes	Yes	No	Yes	No	Yes
#	#color	Yes	Yes	Yes	Yes	No	Yes
\0	color\0	No	No	No	No	Yes	No
\9	color\9	Yes	Yes	Yes	Yes	Yes	Yes
!important	color:blue !important;color:green;	No	No	Yes	No	Yes	No

    11、解决超链接访问后hover样式不出现的问题

        关于a标签的四种状态的排序问题，遵守l（link）ov（visited）eh（hate）a（avcive）te原则。

    12、hasLayout

        CSS在IE下的解析十分奇怪，例如设置border时有时候border会断开，刷新页面或者滚动滚动条的时候，断掉的部分又会连接起来。这些诡异的问题往往与IE下的hasLayout属性有关。hasLayout是IE浏览器专有的一个属性，bug原因可能与hasLayout没有被自动触发有关。hasLayout可以通过设置width、height、position:relative等触发，而最好的方法是设置zoom:1。zoom是最常用、最安全、成本最小的触发方式。如果在很特殊的情况下，zoom:1无效，可以通过设置position:relative来触发hasLayout。

    13、块级元素和行内元素

        块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度，行内元素不会独占一行，襄铃的行内元素会排列在同一行里，知道一行排不下才会换行。

        块级元素及时设置了宽度，仍然是独占一行。

        行内元素的margin和padding属性，在水平方向会产生边距效果，但在垂直方向设置padding-top/padding-bottom/margin-top/margin-bottom不会有效果。

        关于display属性，块级元素对应于block，行内元素对应inline。因此可以通过修改diaplay来切换块级元素和行内元素。

        hasLayout是IE为解析盒模型而设计的一个专有属性，它的设计初衷是用于块级元素的，如果触发行内元素的hasLayout，就会让行内元素拥有块级元素的特性。

    14、relative、absolute、float

        文档流：元素根据自己的display类型、长宽、内外边距等属性顺序排列在z-index：0这一层里。

        只要设置了position:absolute、float:left、float:right中任意一个，都会改变元素的display属性为inline-block。

    15、竖直居中

        vertical-align只有当父元素为td或th才生效，在firefox和IE8下，可以设置diaplay:table-cell来激活vertical-align属性，对于不支持的IE6和IE7使用特定格式的hack，比如.vertical{*position:absolute;*top:-50%;}。

    16、z-index

        z轴在元素设置position:relative/absolute后激活，z-index可以为负数。

        多个元素位置重叠的效果，除了z-index，还可以通过设置负边距是元素位置发生重叠margin-top:-50px。