《编写高质量代码－－Web前端开发修炼之道》读书笔记_html/css_WEB-ITnose

前言

这两周参加公司的新项目，采用封闭式开发 (项目成员在会议室里开发)，晚上加班到很晚，所以没时间和精力写原创博客了，今天就分享下这篇《编写高质量代码－－Web前端开发修炼之道》读书笔记吧。

 

 

正文

欲精一行，必先通十行。

 

在前端开发这个领域，一专多能更是非常必要的。

 

table布局缺点：

代码量大，结构混乱；

标签语义不明确，对搜索引擎不友好。

 

css布局：div+css，或者(x)html+css。

代码量少、结构精简、语义清新。

代码量少，浏览器端下载时间就会更短；

语义清晰就会对搜索引擎更友好。

 

先确定html，确定语义的标签，再来选用合适的CSS。

 

浏览器会根据标签的语义给定一个默认定样式。

判断网页标签语义是否良好的一个简单方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

测试下DevTool中有没有禁用网页中的CSS设置？测试下w3c官网去掉样式后的效果。

 

标签，搜索引擎对其比较敏感，尤其是h1和h2。

 

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

 

table布局适合展示二维数据。

 

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

尽可能少地使用无语义标签div和span。

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

不是用纯样式标签，例如b、font和u等，改用css设置。语义上需要强调的文本可以包含在strong或em标签里。

对于文件过于分散和集中的问题并没有完美的解决方案，我们需要根据实际情况做些适当的折中。

 

css rest：

不推荐 * { margin:0; padding: 0 }，推荐显示罗列出来。也不建议写成：{margin:0; padding:0; color:#000; font-size:12px;}，因为这样会破坏css的继承性。

.fl { float: left; display: inline } 其中display: inline是为了解决IE6的双外边距Bug。

.zoom { zoom: 1 } 是IE的专有属性，为了触发IE的hasLayout。当zoom无效时，可以设置“position: relative”来触发hasLayout。

补充：

     reset浏览器默认样式，推荐： https://github.com/necolas/normalize.css

 

拆分模块：

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

模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。

 

驼峰法用于区别单词，划线用于表明从属关系。例如：.timeList-lastItem。

学习这种风格的命名：

.fr { float: right; }

.w25 { width: 25%; }

多用组合，少用继承。

 

当样式设置有冲突时，会采用权重高的样式。

html标签的权重：1，class的权重：10，ID的权重：100.

当权重相同时，会采用最近定义原则。

 

为了保证样式容易被覆盖，提高可为维护性，css选择符的权重尽可能低。

 

css的hack方式通常是 选择符前缀法 和 样式属性前缀法。

 

标签的四种状态定义顺序，l( link )ov( visited )e h( hover )a( acitive )te，即love hate原则。

 

块级元素和行内元素：

块级元素可以设置width、height属性，行内元素设置width、height属性无效。

块级元素可以设置margin和padding属性。行内元素设置margin和padding的水平方向，即-left和-right有效，垂直方向的-top和-bottom无效。

通过修改display属性来切换块级元素和行内元素。

 

hasLayout：

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

 

display：inline-block

行内的块级元素，它有块级元素的特点：可设置宽高、margin和padding值，也有行内元素的特点：不独占一行。

会触发hasLayout。垂直方向的对齐，可设置形如 *vertical-align: -10px 来解决。

为了实现E6、IE7和其他浏览器都兼容display: inline-block，也存在一定问题：

它只能对行内元素实现 display: inline-block；不可以是块级元素。

*vertical-align是针对IE对hack，这也是不友好的，能不用hack就尽量不要使用hack。

虽然IE6和IE7不支持CSS设置为display: inline-block，但事实上IE6和IE7的CSS解析引擎还是有display: inline-block的，比如说img标签和button标签都具有display: inline-block的特性，可以设置宽高但却不独占一行。

 

float

会改变正常的文档流排列，影响到周围元素。

position: absolute 和 float: left或float: right 会隐式地改变display类型，不论之前是什么类型的元素(display: none除外)，都会让元素以display: inline-block方式显示：可以设置宽高，默认宽带并不占满父元素。

 

居中

水平居中
(1) 文本、图片等行内元素的水平居中：给父元素设置 text-align: center
(2) 确定宽度的块级元素的水平居中：给元素设置 margin-left: auto 和 margin-right: auto
(3) 不确定宽度的块级元素的水平居中：    
    I. 使用table包裹，并给table设置margin: 0 auto;       优点：做法巧妙。缺点：增加了无语义标签，加深了标签的嵌套层数    
    II. 使用display: inline/inline-block;       优点：简单明了，结构清晰。缺点：使用inline后变成了行内元素，缺少了某些特性，如：width, hieght…   
    III. 使用position: relative，给父元素设置float、position:relative和left:50%，子元素设置position:relative和left:-50%。      优点：结构清晰。缺点：position:relative会带来一些副作用。

垂直居中
(1) 父元素高度不确定的文本、图片、块级元素的垂直居中：给父容器设置相同的上下内边距实现。
(2) 父元素高度确定的单行文本的垂直居中：line-height: 父元素高度。
(3) 父元素高度确定的多行文本、图片、块级元素垂直居中：    
    I. 使用table包裹，缺点：添加了无语义标签，增加了嵌套层数。    
    II. 对支持 display: table-cell 的IE8 和 firefox 用 display: table-cell 和 vertical-align: middle 来实现居中，对不支持的IE6-7，使用特定格式的hack：给父子两层元素分别设置{ *position: absolute; *top: 50% }和{ *position: relative; *top: -50% }来实现居中。缺点：使用来hack不利于维护，设置position: relative; position: absolute; 带来一些副作用。

 

网格布局

    无论sidebar和main在样式上谁左谁右，在html标签上要保证main的标签在sidebar之前被加载。

    只在最外层的容器给定具体宽度，所有其他容器的宽度均用百分比设置 ?? 网格布局。

 

z-index

    z 轴在元素设置position为absolute或relative后被激活。

    设置负边距可以让相邻元素的位置产生重叠，谁浮在上面，取决于html标签出现的先后，后出现的标签浮于先出现的标签之上。

    IE6下的select遮挡问题，可使用同样大小的iframe遮住select。

 

为避免组件的上下外边距重合问题和IE的hasLaout引发的Bug，各模块除特殊需求，一律采用margin-top设置上下外边距。

 

Javascript

使用匿名函数将脚本包起来，可以有效控制全局变量，避免冲突隐患。

让JS不产生冲突，需要避免全局变量的泛滥，合理利用命名空间以及为代码添加必要的注视。

DOMReady比window.onload更适合来调用初始化函数。

在页面的最后，即