Web前端开发最佳实践(第6、7和8章)——CSS最佳实践
以下内容大部分摘自《Web前端最佳实践》
第6章 CSS最佳实践
6.1如何高效组织css代码
css
library（目录）
business（目录）
common.css
default.css
ie-style.css
default.css的作用是重置元素的默认样式，目的是让元素在各浏览器中有统一的外观。
common.css是放置共通模块的样式和一些基础样式。
ie-style.css中放置了兼容IE浏览器的样式，在页面中使用IE浏览器独有的条件注释方式引用:
<!--[if lt IE 8]>
<link rel='stylesheet' href="ie-style.css" />
<![endif]-->
其余的css样式文件则用于具体业务模块，不同模块的样式文件放置于不同的文件夹中，划分模块的粒度原则上尽量保证每个模块对应的样式文件函数不超过200行，否则需要继续划分。在发布的时候使用工具把多个文件压缩合并成一个文件。
模块内部样式应该遵循一定规则：
- 样式声明的顺序应该按照模块中元素的层级关系来处理，如应该从父元素开始定义，同级元素按照在页面的位置从上到下、从左到右地定义样式，在多个元素共通的声明中，则先声明共通样式，再声明个体样式；
- 如果以上规则不足以有效组织css样式代码，可以使用less和sass，他们将css赋予了变量、继承、运算和函数等动态语言的特性，避免一些重复的代码，提高开发和维护效率。
6.2使用css reset：统一浏览器显示效果
曾经有一种方案火爆一时，就一行代码： * { margin:0; padding:0 }
该方案重置得非常彻底，重置了所有标签的默认margin和padding样式，一劳永逸，因为标签在浏览器之间的差异主要是由这两个样式和border样式有关的默认样式产生的。但是有几个问题：
i.需要啊添加额外的代码重新设置某些标签的margin和padding
ii.性能不佳，页面元素很多时会影响页面渲染的性能
目前有多个流行的样式重置方案可供参考：Reset CSS（Eric Meyer）和YUI Reset CSS（雅虎），具体地要根据情况设置。
6.3给css样式定义排序
给css样式定义排序的常用方法有：
- 按类型分组排序（推荐方式）：Andy Ford把css属性分为7大类：显示与浮动、定位、尺寸、边框相关属性、字体样式、背景和其他；
- 按字母序排列，按首字母从a到z排列，忽略浏览器前缀；
- 按定义长度排序。
推荐工具：CSScomb
6.4合理利用css的权重：提高代码的重用性
- CSS有6类基础选择器：ID选择器，类选择器，属性选择器（如a[href="xx"]），伪类和伪对象选择器，标签类型选择器以及通配选择器。
- 这6类基础选择器有不同的权重，权重对应着优先级：ID > 类|伪类|属性选择器 > 标签类型|伪对象 > 通配符
以下是一些具体的原则：
- css样式中尽量不要使用ID选择器：针对id设置的样式是唯一的，无法作用于其他的元素；后面的无法覆盖之
- 减少子选择器的层级
- 使用组合的css类选择器：多组合，少继承；稳定部分作为主体类，可变部分按照逻辑分为几种简单的类
6.5如何兼容IE浏览器
熟悉ie浏览器中常见的样式兼容问题，一类是浏览器本身的bug，一类是和标准不兼容或不支持标准，常见兼容问题见code.tutsplus.com/tutorials/9-most-common-ie-bugs-and-how-to-fix-then--net-7764或本人博客转载文章《9大常见iebugs及解决诶方法》
分离样式兼容代码，兼容代码单独放在一个文件中，如ie8.css, ie7.css，然后通过ie特有的注释<!--[if IE 7]> <html class="ie7"><![endif]-->来分别引用
6.6em、px或%
最广泛的相对长度单位是em，最广泛的绝对长度单位是px，加上%，就是最广泛的三种尺寸和字体大小设置方式。em等同于元素上计算的字体大小值，如2em的大小等同于所应用元素上字体大小的2倍。
最佳实践：
- 尽量设置相对尺寸，这样当整体模块的尺寸更改时就不需要更改模块内部子模块的尺寸了。随着移动平台的广泛使用，这种相对布局可以适应不同屏幕宽度。
如果期望尺寸随着字体而变动，则应该使用em，如果期望随着父元素尺寸而变动，则使用百分比。例如行高一般用em，设置高度或宽度用百分比。
- 只有在可预知元素尺寸的情况下才使用绝对尺寸。如网页整体的宽度固定，页面展示图片时合适的固定尺寸才能获得最佳效果时。
- 使用em设置字体大小：一般浏览器默认字体大小是16px，那么0.8em就表示13px（16*0.8px）
使用em时应该避免设置超过两层的字体相对尺寸，否则会增加维护成本；css3中引进了rem单位来避免此问题，rem是相对于根元素的字体大小来计算的。
第7章 高性能的CSS
7.1使用高效的CSS选择器
能被浏览器快速解析和匹配的CSS选择器就是高效的选择器，举个例子：
.reference p.list div {
}
.reference .list-item{
}
#reference_list_item{
}
以.reference p.list div为例，一般人按照管用的从左到右匹配的思维，以为浏览器会先找到references类的元素，在这些元素中找到具有<p>标签的所有元素，并从中找出带list类的元素，接着在匹配到的元素中查找具有<div>标签的所有子元素。
然而，实际上CSS选择器的匹配原则正好相反，它是从右往左进行匹配的。这样来说，比较而言，第三种选择器是最快的。
CSS选择器定义的最佳实践是：
- 避免使用通配符
- 避免使用标签选择器及单个属性选择器作为关键选择器，在一个选择符中，最右边的选择器为关键选择器，它决定着浏览器初始匹配的元素数量。单个属性选择器会在所有匹配的标签上查找对应的属性。
- 不要在ID选择器前使用标签名，这是多余的，无端增加匹配计算时间。
- 尽量不要在选择符中定义过多的层级，最好不要超过三层。
7.2 CSS相关的图片处理
I.不要设置图片的尺寸，利用样式缩放图片会带来CPU的额外计算过程，增加渲染时间；在制作图片时，尽量按照实际需求的尺寸制作，缩略图和实际图片不要使用相同的图片。
II.使用CSS Sprite技术
雪碧图有如下劣势：
a.开发过程繁琐
b.维护过程方复杂
c.使用不当，会导致性能问题。如随意组合图片会导致空白区域增多，合并后的图片反而非常大，占用很大的内存
雪碧图有如下优势：
a.在项目后期，背景图片相对固定，应用CSS Sprite技术
b.合理组织sprite图。组织背景图是指把相关的背景图放置于同一sprite图中，主要分按模块划分和按风格划分两种。
c.控制sprite图的尺寸和大小，雪碧图最好不要超过200KB，太大会耗费更多的传输时间；如果合并后太大，应该以模块的不同进行分割。
d.合理控制北京图单元之间的距离以及背景图的位置。
e.借助工具生成背景图和对应的CSS代码，例如CSS Sprite Generator；如果已经有了sprite图，只是想生成对应的css代码，则可以使用S平日塔尔Cow。还可以使用Sprite Me。
7.3 减少CSS的代码量
I.定义简洁的CSS规则
II.合并相关的CSS规则，如font-family,font-size,...可以合并成font:...一条
III.定义简洁的属性值，如0.8 => .8，color:#FF33EE => color:#F3E
IV.合并相同的定义。可以把相同的定义合并，且设置在父元素上。例如一般一个页面就一个主要字体，只需要把这个字体设置在网页的<body>标签上。
V.删除无效的定义
7.4其他高性能实践
I.避免使用@import
II.避免使用IE独有的样式，如图片滤镜和CSS表达式，css表达式不光有兼容问题，还有性能问题，因为会随着窗口大小变化和滚动时使浏览器频繁计算。
第8章 CSS3相关最佳实践
8.1 查看浏览器的支持情况
推荐一个查看浏览器兼容性的网站：caniuse.com。还有CSS3 Click Chart和CSS contents and browser compatibility。
8.2 添加必要的浏览器前缀
Chrome和Safari使用-webkkit做前缀，Firefox使用-moz作为前缀，IE使用-ms作为前缀，Opera使用-o作为前缀。
最佳实践：
a.使用工具来添加CSS属性定义的浏览器前缀，这里推荐工具：Prefixr，cssFx，CSS Agent和-prefix-free
b.借助CSS预处理技术，给CSS定义添加浏览器前缀，提高可维护性。
c.不要过度添加浏览器前缀，有些时候前缀不需要、不存在。
8.3 做好CSS3中新特性的兼容处理
针对CSS3的降级处理，也主要集中在IE浏览器中，主要技巧是使用其独有的filter样式和JavaScript代码来实现。假如新特性没有对应的CSS降级处理方式，可以借助js，推荐使用Modernizr工具，其包含了CSS3中新特性的兼容方案。
这里推荐一个如何更有效地使用HTML5的建议网站：html5please。CSS3中的新特性可以分为三类：
a.直接使用。这部分包含大部分的新特性，其中有些本身不会影响兼容性，可以直接使用，还有些需要降级处理。
b.谨慎使用。例如使用框阴影效果时，如果它应用于一个占用很大区域的元素，则当页面桂东或者鼠标悬停时，会引起不小的性能问题。
c.避免使用。主要是因为浏览器兼容性问题，这些特性仅被某个浏览器支持。
浙公网安备 33010602011771号