CSS工作流

书写规范

 1、使用2个空格的缩进;
 2、使用Unix风格换行符（LF）;
 3、删除行尾多余的空格;
 4、文件末尾增加一个空行。
 以上的创作规范可以在编程器，如在Sublime Text中写一个插件自动实现以上功能。

重置

1、CSS Reset：如使用*选择器是一种简单粗暴的效果，会重置浏览器的默认样式，其效率会降低很多，尽管没有人通过实践证明过它:

*{margin:0;
  padding:0;
}

所以使用针对部份样式进行重置，如下：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
{margin:0;padding:0;}

网友分享的常用样式重置

2、Normalize.css：它可以保护有用的浏览器默认样式，而不是去完全去掉它们。它的特点有：
（1）可以修复浏览器自身的Bug并保证跨浏览器的一致性;
（2）模块化，按需定制。
Normalize.css下载
Normalize.css使用方法

3、Neat.css：基于Normalize的全新cssReset，兼容IE6+以上及其它浏览器。其特点：
（1）人性化的细节处理：如textarea 默认只能垂直拖动，防止宽度改变破坏布局，汉字字号小于 12px 不易阅读，为 元素设置默认值为 12px等。
（2）移动设备优先： iPhone 横屏时默认会放大文字，如果页面已经做了响应式，这可能会破坏布局。
（3）考虑响应式：IE6 以上浏览器，图片默认支持缩放。
（4）跨平台最佳 font-family。
（5）中文排版解决方案。
（6）解决表单渲染问题。

Neat.css样式解决方案

前缀

1、手写前缀：标准属性应该放到最后，IE不用前缀。

.foo{
-webkit-transtion:width .3s;
-moz-transtion:width .3s;
-ms-transtion:width .3s;/*IE 不用前缀*/
-o-transtion:width .3s;
transtion:width .3s;/*标准属性应该放到最后*/
}

2、Emmet插件：如使用Sublime Text的Emmet插件功能，在输入trans3s时按下Tab键就会自动生成前缀。

3、Autoprefixer：对比Emmet，只用写标准的css属性，不仅可以增加前缀，还可以批量删除。

闭合浮动

CSS 后处理工具：CSS Grace

CSS Grace 介绍及使用

.foo{
clear:fix;
overflow:hidden;
}

前后处理

（1）后处理器是什么？
- css压缩：clean-css
- 自动加前缀：Autoprefixer（基于postCss）
- css属性排序：CSScomb
- Rework，取代Stylus
- PostCSS

（2）预处理与后处理器的关系？
后处理器的特性：CSS原生语法，学习成本低，支持预处理器，完善整个CSS工作流，把逻辑交给JS。