《编写高质量代码 Web前端开发修炼之道》读书笔记

第1章 从网站重构说起

1、所谓高质量的代码，在Web标准的思想指导下，在实现结构、样式、行为分离的基础上，还要做到三点：精简、重用、有序。精简的代码可以让文件变小，有利于客户端快速下载；重用可以让代码更易于精简，同时有助于提升开发速度；有序可以让我们更清晰地组织代码，使代码易于维护，有效应对变化。

2、Web标准是一套理论性的指导思想，它的最终目的是让代码更易于维护，标准本身是手段，而不是目的。在应用Web标准的实践中，有时候不遵循标准反而能带来更好的可维护性，如果你确信你的方案利大于弊，那么就去做吧，尽信标不如无标准，过于教条主义是一件很愚蠢的事情。

第2章 团队合作

1、前端开发工程师应该关注的知识领域：

第3章 高质量的HTML

1、标签语义对照表：

标签名	英文全拼	中文翻译
div（无语义）	division	分隔
span（无语义）	span	范围
ol	ordered list	排序列表
ul	unordered list	不排序列表
li	list item	列表项目
dl	definition list	定义列表
dt	definition term	定义术语
dd	definition description	定义描述
h1~h6	header 1 to header 6	标题1到标题6
p	paragraph	段落
a	anchor	锚
var	variable	变量
pre	preformed	预定义格式
blockquote	block quotation	区块引用语
strong		加重
em	emphasized
b	bold	粗体
br	break	换行
font		字体
u	underlined	下划线
fieldset		域集
legend		图标
caption		标题

2、正确的做法：先确定HTML，确定语义的标签，再来选用合适的CSS。

3、判断网页标签语义是否良好的一个简单方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。Firefox的Web Developer插件有禁用网页中CSS的功能，有了这个功能，我们可以轻松而快速地查看网页去样式后的表现。

4、当页面内标签无法满足设计需求时，才会适当添加 div 和 span 等无语义标签来辅助实现。

5、一般来说，表单域要用fieldset标签包起来，并用legend标签说明表单的用途。因为fieldset默认有边框，所以可以把fieldset的“border”设为“none”，把legend的“display”设为“none”，去掉它们的默认样式，以兼顾语义和设计两方面的要求。每个input标签对应的说明文本都要用label标签，并通过为input设置id属性，在label标签中设置“for = someId”来让说明文本和相应的input关联起来。

6、在CSS布局中table不推荐用来布局，但是在二维数据展示方面它是最好的选择。table常用的标签除了table、tr、td，还有caption、thead、tbody、tfoot和th。一般，表格标题要用caption，表头用thead包围，主体部分用tbody包围，尾部要用tfoot包围，表头和一般单元格要区分开，表头用th，一般单元格用td。

7、语义化标签应注意的一些其他问题：

   （1）、尽可能少用无语义标签div和span；

   （2）、在语义不明显，既可用div也可用p的地方，尽量用p，因为p默认下有上下间距，去样式后的可读性更好，对兼容特殊终端有利。

第4章 高质量的CSS

1、作者推荐一种组织CSS的方法：base.css + common.css + page.css：

  （1）、base层：提供CSS reset功能和粒度最小的通用类——原子类。这一层会被所有页面所引用，是页面样式所依赖的最底层，这一层与具体UI无关。

  （2）、common层：提供组件级的CSS类。

  （3）、page层：网站中非高度重用的模块，可以放在 page 层里。

2、推荐的base.css内容：

/* CSS trdry */

body, div, dl, dt, dd, ul, ol, li, h1, h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,block, quote，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;}

capation,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;}

/*文字排版*/

.f12{font-size:12px;}

.f13{font-size:13px;}

.f14{font-size:14px;}

.f16{font-size:16px;}

.f20{font-size:20px;}

.fb{font-weight:bold;}

.fn{font-weight:normal;}

.t2{text-indent:2em;}

.lh150{line-height:150%}

.lh180{line-height:180%}

.lh200{line-height:200%}

.unl{text-decoration:underline;}

.no_unl{text-decoration:none;}

/* 定位*/

.tl{text-align:left;}

.tc{text-align:center;}

.tr{text-align:right;}

.bc{margin-left:auto;margin-right:auto;}

.fl{float:left;display:inline;}

.fr{float:right;display:inline;}

.cb{clear:both;}

.cl{clear:left;}

.cr{clear:right;}

.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}

.clearfix{display:inline-block;}

*html .clearfix{height:1%}

. Clearfix{display:block;}

.vm{vertical-align:center;}

.pr{position:relative;}

.pa{position:absolute;}

.abs-right{position:absolute;right:0;}

.zoom{zoom:1}

.hidden{visibility:hidden;}

.none{display:none;}

/*长度高度*/

.w10{width:10px;}

.w20{width:20px;}

.w30{width:30px;}

.w40{width:40px;}

.w50{width:50px;}

.w60{width:60px;}

.w70{width:70px;}

.w80{width:80px;}

.w90{width:90px;}

.w100{width:100px;}

.w200{width:200px;}

.w300{width:300px;}

.w400{width:400px;}

.w500{width:500px;}

.w600{width:600px;}

.w700{width:700px;}

.w800{width:800px;}

.w{width:100%}

.h50{height:50px;}

.h80{height:80px;}

.h100{height:100px;}

.h200{height:200px;}

.h{height:100%}

/*边距*/

.m10{margin:10px;}

.m15{margin:15px;}

.m30{margin:30px;}

.mt5{margin-top:5px;}

.mt10{margin-top:10px;}

.mt15{margin-top:15px;}

.mt20{margin-top:20px;}

.mt30{margin-top:30px;}

.mt50{margin-top:50px;}

.mt100{margin-top:100px;}

.mb5{margin-bottom:5px;}

.mb10{margin-bottom:10px;}

.mb15{margin-bottom:15px;}

.mb20{margin-bottom:20px;}

.mb30{margin-bottom:30px;}

.mb50{margin-bottom:50px;}

.mb100{margin-bottom:100px;}

.ml5{margin-left:5px;}

.ml10{margin-left:10px;}

.ml15{margin-left:15px;}

.ml20{margin-left:20px;}

.ml30{margin-left:30px;}

.ml50{margin-left:50px;}

.ml100{margin-left:100px;}

.mr5{margin-right:5px;}

.mr10{margin-right:10px;}

.mr15{margin-right:15px;}

.mr20{margin-right:20px;}

.mr30{margin-right:30px;}

.mr50{margin-right:50px;}

.mr100{margin-right:100px;}

.p10{padding:10px;}

.p15{padding:15px;}

.p30{padding:30px;}

.pt5{padding-top:5px;}

.pt10{padding-top:10px;}

.pt15{padding-top:15px;}

.pt20{padding-top:20px;}

.pt30{padding-top:30px;}

.pt50{padding-top:50px;}

.pt100{padding-top:100px;}

.pb5{padding-bottom:5px;}

.pb10{padding-bottom:10px;}

.pb15{padding-bottom:15px;}

.pb20{padding-bottom:20px;}

.pb30{padding-bottom:30px;}

.pb50{padding-bottom:50px;}

.pb100{padding-bottom:100px;}

.pl5{padding-left:5px;}

.pl10{padding-left:10px;}

.pl15{padding-left:15px;}

.pl20{padding-left:20px;}

.pl30{padding-left:30px;}

.pl50{padding-left:50px;}

.pl100{padding-left:100px;}

.pr5{padding-right:5px;}

.pr10{padding-right:10px;}

.pr15{padding-right:15px;}

.pr20{padding-right:20px;}

.pr30{padding-right:30px;}

.pr50{padding-right:50px;}

.pr100{padding-right:100px;}

3、.fl{float:left;} .fr{float:right}还应设 display：inline ，防止ie6双边距Bug。例如设置margin-left:10px，在IE6下会显示为margin-left:20px。

4、 .bc{margin-left:auto;margin-right:auto }使块级元素居中，还应该设置宽度。