读书笔记：编写高质量代码--web前端开发修炼之道（一：1-4章）
读书笔记：编写高质量代码--web前端开发修炼之道
这本书看得断断续续，不连贯，笔记也是有些马虎了，想了解这本书内容的童鞋可以借鉴我的这篇笔记，希望对大家有帮助。
笔记有点长，所以分为一，二两个部分：
第一部分：1-4章的笔记
第二部分：5章以及一些总结性的建议笔记等
转载本文，请带上本文地址(http://www.cnblogs.com/xmmcn/archive/2012/12/04/2800930.html)，谢谢:)
第一章：从网站重构说起
1、所谓高质量的代码，在web标准的思想指导下，在实现结构、样式和行为分离的基础上，还要做到三点：
精简：代码小，有利于下载
重用：有利于精简，加快开发速度
有序：更加清晰的组织代码，易于维护
web标准是一套理论性的指导思想，它的最终目的是让代码更易于维护，标准本身是手段，而不是目的。
第二章：团队合作
1、前端的知识面需要更宽更广，才能做到更加的专，更加的精。
2、增加代码可读性，注释不可少。
3、前期构思很重要。
4、制订团队规范。
5、团队合作最大难度不是技术，而是人。
第三章：高质量的HTML
1、强调标签语义化。
页面标签语义化：结构更加清晰明朗
模块标签语义化：当页面内标签无法满足设计需求时，才会适当添加 div 和 span 等无语义标签来辅助实现。
一些问题：
a 尽可能少的使用无语义标签 div 和 span
b 在语义不明显，既可以用 p 也可以用 div 的地方，尽量用 p，因为 p 默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利。
c 不要使用纯样式标签，eg：b，font，u等，改用css设置。
第四章：高质量的CSS
1、选用标准的 DTD（Document Type Definition 文档类型定义）。
2、组织CSS：base.css(通用类,原子类)+common.css(组件级)+page.css(页面级)
3、模块化CSS：
拆分模块技巧：
a 模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将它们提取出来，拆分成一个独立的模块
b 模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性
4、CSS的命名：
a 推荐英文命名 eg：header container footer
b 使用驼峰命名法或者分隔命名法，或者二者结合 eg：timeList timeList-first ...(驼峰区别单词，中划线表示从属) || time-list time-list-first (中划线单词分隔)
c 命名冲突(多人协作会出现):命名带上特殊标记，比如作者名字拼音简写 eg：hcm-timeList hcm-timeList-first .. (会造成名字长的状况，但是方便于代码维护，有利于团队协作，单人或者肯定不会重名的前提下，可以不加标记)
example 1：
View Code
html: <ul class="timeList"> <li class="timeList-first">1</li> <li>2</li> </ul> css: .timeList {...} .timeList li {...} .timeList (li).timeList-first {...} /*加上 tag 选择符可以增加权重*/
example 2:
View Code
html: <ul class="timeList"> <li class="timeList-item timeList-first">1</li> <li class="timeList-item">2</li> </ul> || <dl class="timeList"> <dd class="timeList-item timeList-first">1</dd> <dd class="timeList-item">2</dd> </dl> css: .timeList {...} .timeList-item {...} .timeList-first {...} /*timeList-item 与 timeList-first 都是类选择符，权重一致*/ /*故 为了保证 timeList-first 能够覆盖 timeList-item 的css，必须保证 .timeList-first {...} 必须写在 .timeList-item {...} 的后面，这个与 class 里面的书写顺序无关，为了保证覆盖，我们可以给予更多的权重 .timeList .timeList-first {...}*/
example 3:
View Code
html: <p calss="color1 color2">我是什么颜色？-1</p> <p calss="color2 color1">我是什么颜色？-2</p> css: p {color: #f00;} .color1 {color: #fff;} .color2 {color: #000;}
首先 p 的文字颜色由权重决定，那么 p {color: #f00;} 就不会起作用
其次 .color1 与 .color2 都是类选择符，这二者如何决定颜色呢？我通过实验发现:
相同权重的css,会根据其在css代码中的书写顺序决定样式,并不会被 class 属性里面的类书写顺序决定,也就是说 calss="color1 color2" 与 calss="color2 color1" 的作用是相同的
从上面2个例子看，我比较喜欢后面一种写法，虽然标签上的class变得多了，但是不拘泥于结构，可随处使用，简单漂亮，从属关系通过 - 来体现，不需要一层一次层的 前缀 来体现，而且这样方便重载。
5、挂多个class还是新建class
a 多用组合，少用继承：
按照我的理解，作者提倡这样的写法：class="a b c d e ..."，而非 class="all"
就我本身而言，我也比较喜欢前者，但是，组合的度要把握好，用不好到后期就是维护的恶梦，我认为 灵活的通用类+合适的模块类 方乃便捷之道，兼顾灵活与通用性。
6、低权重原则--避免滥用子选择器
a 权重分级：
*(通用选择符) 0
tag(类型选择符) 1
.class(类选择符) 10
>(子选择符) 10
[attribute](属性选择符)10
:hover(伪类选择符) 10
:before(伪元素选择符) 10
#id(ID选择符) 100
style(内联样式) 1000
!important max
b 为了保证样式容易被覆盖,提高可维护性,CSS选择符需保证权重尽可能低。
7、CSS sprite
CSS sprite的最大好处是减少 HTTP 请求数，减轻服务器的压力，但它却需要付出“降低开发效率”和“增大维护度”的代价（貌似现在有相关自动化的css sprite工具，略微改变了这一现状）
8、CSS的编码风格
a 多行式与一行式
我取二者结合
example:
View Code
.a {overflow: hidden;display: block;float: left;margin: 0 10px;padding: 10px;height: 100px;width: 200px;font-size: 14px;color: #000;border: 1px solid #ccc;background: none;}
.b {
overflow: hidden;
display: block;
float: left;
margin: 0 10px;
padding: 10px;
height: 100px;
width: 200px;
font-size: 14px;
color: #000;
border: 1px solid #ccc;
background: none;
}
.c {
overflow: hidden;display: block;float: left;
margin: 0 10px;padding: 10px;
height: 100px;width: 200px;
font-size: 14px;color: #000;
border: 1px solid #ccc;
background: none;
}
我喜欢 c 的编码风格，兼顾了 a 与 b ，把相似的，有关联的写成一行
9、id和class
a 一般情况下，建议使用 class ，少用 id
10、css hack
a IE条件注释
<!--[if IE]>
<html class="ie" />
<![endif]-->
<!--[if IE 6]>
<html class="ie6" />
<![endif]-->
如果想针对某个范围以内的IE版本进行hack，可以结合 lte lt gte gt ! 关键字进行注释：
lte 小于等于
lt 小于
gte 大于等于
gt 大于
! 不等于
<!--[if gt IE 6]>
<html class="ie6-" />
<![endif]-->
只在 IE6 以上版本生效
b 选择符前缀法
*html .test {...} IE6
*+html .test {...} IE7
c 样式属性前缀法
_width: 10px; IE6
*width: 10px; IE6 && IE7
11、a 伪类书写顺序要正确
:link :visited :hover :active
12、hasLayout
zoom: 1;触发 hasLayout
13、块级元素与内联元素
块级元素：独占一行 宽度填满父元素宽度 可设置width,height 可设置margin,padding
内联元素：不占一行 宽度随元素内容变化 设置width,height无效 可设置水平方向的margin,padding,垂直方向的没有效果
14、display: inline-block 和 hasLayout
inline-block 行内块级元素
IE6，IE7不支持(这种说法貌似是错的，其实是支持的，只是支持不那么完善，见：http://ued.taobao.com/blog/2012/08/15/inline-block/)
15、relative、absolute和float
position 可以改变元素在文档流中的位置
position: absolute; 和 float 会隐式的改变 display 类型，不论之前什么类型的元素(display: none 除外)，只要设置了 position: absolute、float: left 或 float: right 中任意一个，都会让元素以 display: inline-block; 的方式显示，就算我们显示设置 display: inline; 或者 display: block;，也仍然无效(float 在IE6下的双倍边距BUG就是利用添加 display: inline; 来解决的)。
16、居中
a 水平居中
内联元素：text-align: center;
确定宽度的块级元素：margin-left: auto;margin-right: auto;(IE6及以上浏览器支持)
不确定宽度的块级元素：
table：
View Code
html: <table class="page-wrap"><tbody><tr><td> <ul class="page"><li class="page-item"><a href="#">1</a></li><li class="page-item"><a href="#">2</a></li></ul> </td></tr></tbody></table> css: table.page-wrap {margin-left: auto;margin-right: auto;} .page-item {float: left;display: inline;margin: 0 3px;} .page-item a {float: left;padding: 0 8px;height: 20px;line-height: 20px;background: #316ac5;color: #fff;border: 1px solid #316ac5;text-decoration: none;} .page-item a:hover {background: #fff; color: #316ac5;}
这里使用了 table 元素，table 元素有趣的地方在于它本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin: 0 auto;就可以实现水平居中，间接的使包裹在内部的 ul 水平居中。
优点：做法巧妙
缺点：增加了无语义标签，加深了标签的嵌套层数
display: inline;：
View Code
html: <ul><li><a href="#">1</a></li><li><a href="#">2</a></li></ul> css: li {display: inline;}
优点：简单明了，结构清晰
缺点：块级元素变成了内联元素，缺少了某些特性，比如：width,height...
position: relative;：
View Code
html: <ul><li><a href="#">1</a></li><li><a href="#">2</a></li></ul> css: ul {clear: both;float: left;padding-top: 5px;position: relative;left: 50%;} li {float: left;display: inline;margin: 0 3px;position: relative;left: -50%;} a {float: left;padding: 0 8px;height: 20px;line-height: 20px;background: #316ac5;color: #fff;border: 1px solid #316ac5;text-decoration: none;} a:hover {background: #fff; color: #316ac5;}
优点：结构清晰
缺点：position: relative; 会带来一些副作用
b 垂直居中
父元素高度不确定的文本、图片、块级元素的垂直居中：给父容器设置相同的上下边距实现
父元素高度确定的单行文本的垂直居中：line-height: 父元素高度;
父元素高度确定的多行文本、图片、块级元素垂直居中：
table:
View Code
html: <table><tbody><tr><td class="table-test"> <div class="table-test-content"></div> </td></tr></tbody></table> css: .table-test {width: 500px;height: 100px;vertical-align: middle;background: #000;} .table-test-content {width: 200px;height: 50px;background: #f00;}
优点：能够很好实现
缺点：添加了无语义标签，增加了嵌套层数
对支持 display: table-cell 的IE8 和 firefox 用 display: table-cell 和 vertical-align: middle 来实现居中，对不支持的IE6-7，使用特定格式的hack
View Code
html: <div class="wrap"> <div class="verticalWrap"> <div class="vertical">hello world<br />hello world<br />hello world</div> </div> </div> css: .wrap {display: table-cell;width: 500px;height: 100px;*position: relative;vertical-align: middle;} .verticalWrap {*position: absolute;*top: 50%;} .vertical {*position: relative;*top: -50%;}
优点：
缺点：position: relative; position: absolute; 带来一些副作用，有一些hack嵌套
c 网格布局
兼顾灵活多样，活用子选择器重载
17、z-index IE6下的 select 问题
18、png图片
19、多版本IE并存方案--IETest
笔记第二部分：5章以及一些总结性的建议笔记等
转载请带上原文地址(http://www.cnblogs.com/xmmcn/archive/2012/12/04/2800930.html)，谢谢:)
