【WEB前端开发最佳实践系列】CSS篇
一、有效组织CSS代码
规划组织CSS代码：组织CSS代码文件，所有的CSS都可以分为2类，通用类和业务类。代码的组织应该把通用类和业务类的代码放在不同的目录中。
模块内部的另一样式规则：样式声明的顺序是按照模块中元素的层级关系来处理，从父级元素开始，如果是同一级元素则按照元素在页面的位置从上到下。从坐到右地定义对应的样式。如果多个公用，则先声明公用的样式，然后声明个体样式。
CSS排序实践：
- 对CSS样式排序
- 推荐按样式属性功能分组排序
- 推荐在CSS样式代码编写完成并准备嵌入的时候排序
- 使用如CSScomb等工具排序
二、合理利用权重：提高代码的重用性
CSS的6中基础选择器：
- ID选择器
- 类选择器
- 属性选择器
- 伪类和伪对象选择器
- 标签类型选择器
- 通配符选择器
组合选择器：
- 后代选择器（.reader .title{}）
- 子选择器（.reader>.title{}）
- 相邻选择器（.reader+.title{}）
CSS权重规则：
- 计算选择符中的ID选择器的数量（=a）
- 计算选择符中的类选择器、属性选择器以及伪类选择启动额数量（=b）
- 计算标签类型选择器和伪对象选择启动额数量（=c）
- 忽略全局选择器
基础选择器的优先级：
ID>类|伪类|属性选择>标签选择|伪对象>通配符
操作原则：
- CSS样式中尽量不使用ID选择器
- 减少子选择器的层级
- 使用组合的CSS类选择器
浏览器兼容：http://browserhacks.com/#ie
相对单位：
W3C官方文档注意把尺寸单位分为相对长度单位和绝对长度单位两种。相对长度单位在定义长度时是相对于其他长度的，它又分为字体相对单位和视窗相对单位，字体相对单位包括：em ex ch rem视窗相对单位包括：vw vh vmin vmax。绝对长度单位定义的长度是固定的，使用的是物理度量单位，包括：cm mm in px pt pc 。使用最广泛的就是em px和百分比值。
- px:像素，相当于绝对尺寸
- em:相当于元素上计算的字体大小值
- 百分比：相对于父元素的设置
尺寸设置最佳实践：
尽量设置相对尺寸：如果希望尺寸随着字体的改变而改变则应该使用em,如果期望尺寸随着父元素尺寸的改变而改变则应该使用百分比。设置行高一般使用em,设置高度和宽度一般使用百分比。
只有在预知元素尺寸的情况下才使用绝对尺寸：
使用em设置字体大小
三、CSS优化
减少CSS的代码量
合并相关CSS的规则
定义简洁的属性值
删除无效的定义
兼容在线监测：caniuse.com 、 CSS3 Click Chart 、 CSS contents and browser compatibility。CSS3 Clicj Chart提供完整的浏览器兼容代码示例.
添加必要的前缀：Chrome和Safari浏览器使用-webket，Firefox浏览器使用-moz，IE使用-ms，Opera浏览器使用-o.
使用工具来生成CSS属性定义的浏览器前缀：Prefixr。如果希望开发过程中有更多的自主性可以使用Autoprefixer
除上述之外还可以使用：cssFx 、 CSS Agent 、-prefis-free。以及LESS预处理
有效使用HTML5的建议网站：html5please
