读书笔记：编写高质量代码--web前端开发修炼之道（一：1-4章）

读书笔记：编写高质量代码--web前端开发修炼之道

这本书看得断断续续，不连贯，笔记也是有些马虎了，想了解这本书内容的童鞋可以借鉴我的这篇笔记，希望对大家有帮助。

笔记有点长，所以分为一，二两个部分：

第一部分：1-4章的笔记

第二部分：5章以及一些总结性的建议笔记等

转载本文，请带上本文地址(/article/5850899.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:
<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章以及一些总结性的建议笔记等

转载请带上原文地址(/article/5850899.html)，谢谢:)