【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和百分比值。

1. px:像素，相当于绝对尺寸
2. em:相当于元素上计算的字体大小值
3. 百分比：相对于父元素的设置

尺寸设置最佳实践：

尽量设置相对尺寸：如果希望尺寸随着字体的改变而改变则应该使用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