PostCSS到底和CSS的区别在哪里,到底有什么东西值得我们去探索?

PostCss

简单点讲,PostCSS是CSS的处理器。如果你以前使用过CSS的预处理器的话,比如Sass、LESS或者说Stylus。这几个是使用预编码来处理CSS,然后编译成线上需要使用的CSS。而PostCSS刚好相反,他是处理你写好的CSS,让你的CSS更健康。可以用一张图来简单的描述:

1

上图也告诉我们,在这个过程中有很多插件。这些插件就是PostCSS的插件,而且这些插件都是使用JavaScript写的。言外之意,你可以使用JavaScript基于PostCSS核心的Core上编写任何你想要的一款功能的插件。也因为这个原因,PostCSS的插件生态圈非常的强大,最常见的就是Autoprefixer、cssnext之类的。当然还有其他的,这也是PostCSS能在社区迅速发展状大的原因之一。我自己很多时候常把PostCSS的插件生态看作是NPM的生态。这个时候你想想就知道了。

有了PostCSS,我们并不需要抛弃以前所熟悉的Sass或LESS之类的,你的开发模式可以这样:

2

使用Sass先编译成CSS,然后通过PostCSS对编译好的 CSS做优化处理。让自己的代码更为健康。当然你也可以直接自己基于PostCSS定制一款适合你自己的预处理器。

PostCSS不是什么

尽管表面上它看起来是一个预处理器,其实它不是一个预处理器

尽管表面上它看起来是一个后处理器,其实它也不是一个后处理器

尽管它可以促进、支持未来的语法,其实它不是未来语法

尽管它可以提供清理、优化代码这样的功能,其实它不是清理、优化代码的工具

它不是任何一件事情,这也意味者它潜力无限,你可以根据自己的需要配置你需要的功能

PostCSS特别之处

多样化的功能插件,创建了一个生态的插件系统

根据你需要的特性进行模块化

快速编译

创建自己的插件,且具可访问性

可以像普通的CSS一样使用它

不依赖于任何预处理器就具备创建一个库的能力

可以与许多流行工具构建无缝部署

它的插件生态系统提供不同的功能

像PostCSS本身一样令人惊奇的是,它有很多不同的插件,这也是让PostCSS发光之处。当你看到PostCSS在GitHub上的可用插件列表,你会发现其具有各式各样的功能。

模块化

另一方面,PostCSS具有很可用的插件,你可以根据自己所需尽可能使用多的选择或尽可能少选择。

如果仅想用PostCSS让CSS是更有效率和让浏览器更友好的话,加载一些优化插件,你就可以闪人了。

如果仅想用PostCSS作为预处理器的话,使用一些语言扩展插件就OK。

PostCSS的基本原理是粒子化,模块化。简而言之,没有处理多个功能的笨重插件。相反,每创建一个插件,就是一个功能。

可以创建任何自己想要的插件

PostCSS是用JavaScript编写的插件,这样只要能编写JavaScript的就可以创建一个自己想要的插件,达到自己的目的。值得庆幸的是,就算你不是专业的JavaScript开发人员,但使用PostCSS开发插件也就只需要短短的几个小时,就可以开发出一个全功能的插件。

你可以像使用CSS一样使用PostCSS

大多数PostCSS插件不需要使用自定义的语法,其实它就是典型的预处理器。相反,它们可以应用常规的CSS语法。这也意味着,你可以使用PostCSS就像是使用CSS一样。比如说,你要完成一个前端框架,你完全可以使用别人项目中的文件,例如Normalize.css文件。

PostCSS库不会绑定到一个处理器上

虽然过去他们可能一直使用Stylus、Sass或LESS来编写一个库,但我们也开始看到有人通过PostCSS来创建整个库。

另外有一本书专门介绍PostCSS:

即将上架

这是一本英文书,听说中文版本很快要上架了。如果喜欢的话,可以关注一下。

最后提到一点,各部分参考资料以及案例的小伙伴们可来我的前端群:621071874,这里有小编收集到的各部分资料以及案例,望能帮到各位。

推荐阅读更多精彩内容