【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