『编写高质量代码Web前端开发修炼手册』读书笔记--高质量的CSS

1、怪异模式和DTD

标准模式：浏览器根据规范表现页面

怪异模式：模拟老浏览器行为防止老站点无法工作（为了兼容老式浏览器的代码），如果漏写DTD（Document Type Definition文档定义类型）声明，firefox会按照标准模式来解析网页，但在IE中就会触发怪异模式。

两种模式的差异比较大，比较典型的是IE对盒模型的解析；在标准模式中，网页元素的宽度是由padding、border、width三者的宽度相加决定的，而在怪异模式中，width本身就包括了padding和border的宽度

2、如何组织CSS？

按功能划分：font.css color.css layout.css 等

按区块划分：head.css foot.css sidebar.css main.css等

作者建议:base.css + common.css +page.css

base层提供CSS reset功能（覆盖浏览器默认样式）和通用原子类（文字、定位、长宽、边距）,具有高度可移植性

common层是网站级的，不同的网站有不同的common层，同一个网站只有一个common层；网站中高度重要的模块，称之为组件

page层位于最高层，提供页面级的样式

3、模块化CSS

拆分模块的技巧：

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

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

CSS命名规则

①推荐使用英语

②驼峰命名法 用于区别不同的单词，划线用于表明从属关系

③如何避免多人合作时命名冲突？可以使用姓名首字母缩写做为标识符，比如zzl-timeList-lastItem

多用组合，少用继承

如何处理上下margin？

margin是个有点特殊的样式，相邻的margin-left和margin-right是不会重合的，但相邻的margin-top和margin-booton会产生重合；

所以最好统一使用margin-top或者margin-bottom，不要混合使用

总结：如果不确定模块的上下margin特别稳定，最好不要讲它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（例如：mt10、mb20）,

模块最好不要混动margin-top或者margin-booton，统一使用margin-top或margin-bootom

4、低权重原则--避免滥用子选择器

CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。权重规则：HTML标签权重是1，class权重是10，id的权重是100，

例如：p的权重是1，『div em』的权重是1+1=2，『strong.demo』的权重是1+10=11，『#test.red』的权重是100+10=110

如果CSS权重符相同，那么样式会遵循就近原则（选择符定义的先后顺序，而不是class名的先后顺序，<span class="test test2">和<span class="test2 test">是一样的），哪个选择符最后定义，就采用哪个选择符的样式

使用子选择器，会增加CSS选择符的权重，CSS选择符的权重越高，样式越不容易被覆盖，越容易对其他选择符产生影响。

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

5、CSS sprite

最大好处是减轻服务器的压力，对于流量不大的网站来说，CSS sprite带来的好处并不明显；所以是否使用CSS sprite主要取决于网站流量

将网站的背景图 合到一张大图片上。对于流量大的网站来说，改技术很有价值

①能合并的只能是用于背景的图片，对于<img src=""/>设置的图片，是不能合并到CSS sprite大图中的，会影响页面可读性

②对于横向和纵向都平铺的图片，也不能使用CSS sprite；如果是横向平铺的，只能讲所有横向平铺的图片合并成一张大图，只能竖直排列

6、CSS的常见问题

6.1 编码风格

多行式

.test{

width:100px;

height:50px;

color:#ccc;

}

一行式

.test{width:100px;height:50px;color:#ccc}

随着前端调试工具的日益强大，一行式编码风格成为了主流。

6.2 id和class

①同一个网页，相同的id只能出现一次，不可重复；class可以出现多次

②id的CSS选择符权重为100，而class的选择符权重为10

③原生JS 提供getElementById（）方法，支持通过id对应到相关的HTMLElement，但原生JS不支持通过class得到HTMLElement

所以一般情况下，建议尽量使用class，少用id

6.3 CSS hack

①IE条件注释法

 针对不同IE版本分别导入样式

 <!--[ if IE 6]>
 <link type="text/CSS" href="ie6.css" rel="stylesheet">
 <![endif]-->

 <!--[ if IE 7]>
 <link type="text/CSS" href="ie7.css" rel="stylesheet">
 <![endif]-->

 <!--[ if IE 8]>
 <link type="text/CSS" href="ie8.css" rel="stylesheet">
 <![endif]-->

虽然向后兼容性是最好的，缺点也很明显：将同一CSS选择符样式 分散到了三个文件中去控制，增加了开发和维护成本

②选择符前缀法

原理是在CSS选择符前加一些只有特定浏览器才能识别的前缀，从而让某些样式只能在特定浏览器生效。例如 "*html"前缀只对IE6生效，『*+html』前缀只对IE7生效

 选择前缀法不能用于内联样式表；在向后兼容性存在一点风险

 <style type="text/CSS">
 .test{width:80px;}
 *html .test{width:60px}
 *+html .test{width:70px}
 </style>

③样式属性前缀法

在样式的属性名前加前缀，只在特定浏览器下生效。例如『_』只在IE6下生效，『*』在IE 6和IE 7下生效

 相比选择符前缀法聚合程度更高，代码更精简，可维护性很强，但在向后兼容上存在风险；
 可以用在内联样式上

 <style type="text/CSS">
 .test{width:80px;*width:70px;_width:60px}
 </style>

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

关于a标签的四种状态排序问题，有个love hate原则，即l(link)ov(visited)e h(hover)a(activate)te

6.5 hasLayout

hasLayout是IE浏览器专有的一个属性，用于CSS的解析引擎。有些时候IE下一些复杂的CSS设置解析起来会出现bug，原因可能与hasLayout没有被自动触发有关，我们可以手动触发来解决bug

zoom是最常用、最安全、成本最小的触发hasLayout的方式；在『zoom：1』无效的情况下，可以通过设置『position:relative』来触发hasLayout

6.6块级元素 和 行内元素的区别

常见的块级元素有div、p、form、ul、ol、li等，块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度；块级元素可以设置width、height属性；块级元素可以设置margin、padding属性

常见的行内元素有span、strong、em等；行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行；行内元素设置width、height属性无效；行内元素设置有问题，具体是：水平方向的padding-left/right,marigin-left/right都会产生边距效果，但竖直方向的padding-top/bottom,margin-top/bottom却不会产生边距效果

块级元素和行内元素的CSS相关属性是display，其中块级元素对应于display:bolck;行内元素对应于display:inline

6.7 display:inline-block和hasLayout

6.8 relative、absolute、float

6.9 居中

6.9.1、水平居中

①文本、图片等行内元素的水平居中

text-align:center

②确定宽度的块级元素的水平居中

通过设置margin-left:auto和margin-right:auto来实现

③不确定宽度的块级元素的水平居中

方法1：table标签结合margin-left:auto和margin-right:auto来实现

方法2：改变块级元素的display为inline类型，然后使用text-align:center来实现

方法3:给父元素设置float，然后父元素设置postion:relative和left：50%；子元素设置postion:relative和left：-50%来实现水平居中

6.9.2、垂直居中

①父元素高度不确定的文本、图片、块级元素的竖直居中

给父容器设置相同的上下边距来实现

②父元素高度确定的单行文本的竖直居中

通过给父元素设置line-height和height的属性为同一个值来实现

③父元素高度确定的多行文本、图片、块级元素的竖直居中

方法1：table（td的vertical-align默认是middle）

方法2：对支持display:table-cell的IE8 和 FireFox用display：table-cell和vertical-align：middle来实现居中；对不支持display：table-cell的IE6和IE7，设置positon来实现

6.9.10 网格布局