什么是css reset?

众所周知，HTML标签在浏览器里都有默认的样式，例如p标签有上下边距，strong标签有字体加速样式等，em标签有字体倾斜样式；不同的浏览器默认样式之间也会有差别，例如ul标签默认带有缩进样式，在IE下它的缩进是由margin实现的，但在Firefox下它的缩进是由padding实现的。开发时，浏览器的默认样式会给我们带来很多兼容性问题，影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉。这就是css reset;

什么是css 预编译器？

首先我们先弄清楚为什么会出现css预编译器呢？ 这就要谈到css的不足了，CSS不支持嵌套，甚至运算、变量、复用等这些几乎是编写复杂代码的必备特性，开发者们不断探索着能够弥补这些缺陷的解决方案，CSS预编译器是第一种顺势而生的革命性方案
简单的说，css预编译器，是基于css语言的，能够让css也能有一种编程语言范，从而，解决了css的诸多问题，如css模块化、无法嵌套书写、没有变量。

css 预编译器从下面几个方面提升了css的开发效率：

1. 增强编程能力；
2. 增强可复用性；
3. 增强可维护性；
4. 更便于解决浏览器兼容性

预编译器的原理：

CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码，随后经过专门的编译工具将源码转化为CSS语法。最早的CSS预编译器是2007年起源于Ruby on Rails社区的SASS，目前比较流行的其他CSS预编译器如Less、Stylus的诞生都一定程度上受到了SASS的影响和启发。

不同的预编译器特性虽然有所差异，但核心功能均围绕这些目标打造，比如：

• 嵌套；
• 变量；
• mixin/继承；
• 运算；
• 模块化；

1. 嵌套是所有预编译器都支持的语法特性，也是原生CSS最让开发者头疼的问题之一；
2. mixin/继承是为了解决hack和代码复用；
3. 变量和运算增强了源码的可编程能力；
4. 模块化的支持不仅更利于代码复用，同时也提高了源码的可维护性。

后编译器(post css)是什么？

CSS预编译的理念与Babel有一定相通之处，最重要的区别是：预编译语法并非规范的CSS，而是各成一派。由预编译语法编写的源代码不能在任何宿主浏览器中运行。从这个角度考虑，CSS预编译更像CoffeeScript、TypeScript等JavaScript子集。可以预见的是，如果未来CSS规范推出了预编译类似的特性和语法，这些预编译器都将成为历史的尘埃。PostCSS则反其道而行之，从理念上更加接近Babel，业内也有人将其称为“CSS的Babel”。

PostCSS鼓励开发者使用规范的CSS原生语法编写源代码，然后配置编译器需要兼容的浏览器版本，最后经过编译将源码转化为目标浏览器可用的CSS代码。PostCSS提供了丰富的插件用于实现不同场景的编译需求，最常用的比如autoprefixer、sprites等，编译流程如下图所示：

image.png

PostCSS并不是另一种CSS预编译器，与SASS、Less等预编译器也并不冲突。PostCSS与Babel的不同之处在于，它所支持的所谓“未来CSS语法”并不是严格的CSS规范，其中大部分语法和特性目前只是CSS4的草案而已。很多人将PostCSS称为“CSS后编译器”，这个称谓可以一定程度上说明目前业界对PostCSS的普遍使用方案，请看下图：

image.png

使用CSS预编译弥补CSS源码的弱编程能力，比如变量、运算、继承、模块化等；
使用PostCSS处理针对浏览器的需求，比如autoprefix、自动css sprites等。