ostCSS是一个非常通用的工具，它可以通过javascript插件转换CSS样式。它的灵活性在于它的建造方式。

PostCSS的核心部分是一个node.js模块，您可以使用NPM进行安装，它有一个由200多个插件组成的生态系统，您可以在项目中选择使用这些插件。

PostCSS既不是预处理器，也不是后处理器，因为不同的PostCSS插件可能属于这两类中的任何一类，或者同时属于这两类；它完全取决于您对它的理解。使用PostCSS，您不需要学习不同的语法，比如sass或Less；您可以立即开始使用它。

PostCSS获取现有的css文件并将其转换为javascript可读数据，然后javascript插件执行修改，postss返回原始文件的修改版本。听起来很酷，不是吗？

在这篇文章中，我们将查看6个Postcss插件，让您了解使用这个出色的工具可以实现的一些伟大的事情。

Autoprefixer

autoprefixer可能是最知名的postcss插件，因为它被谷歌、Twitter和Shopify等知名科技公司使用。它在必要的地方向CSS规则添加供应商前缀。

autoprefixer使用我可以使用的数据。这样它就不会过时，而且可以应用最新的规则。您可以在它的交互式演示站点上查看它的工作原理。

CSSnext

cssnext是一个CSS发起者，它允许您在当前站点上使用未来的CSS语法。W3C有许多新的CSS规则，这些规则目前没有被浏览器实现，但可以使开发人员更快、更容易地编写更复杂的CSS。cssnext是用来弥补这个缺口的。

值得一看它的特性，看看你能用它完成什么，例如你可以在你的设计中使用自定义媒体查询、自定义选择器、颜色修改器、SVG过滤器和新的伪类。

PreCSS

PreCSS是一个postcss插件，工作方式类似于css预处理器。它可以利用样式文件中的标记之类的SASS。

通过在工作流中引入PreCSS，您可以在CSS代码中使用变量if else语句、for循环、mixin、@extend和@import规则、嵌套和许多其他方便的功能。PreCSS的Github文档为您提供了如何充分利用它的详细说明。

StyleLint

StyleLint是一个现代的CSS Linter，它可以校对和验证您的CSS代码。它使避免错误变得容易，并促使您遵循一致的编码约定。

Stylelint了解最新的CSS语法，因此它可以与前面提到的precss插件一起使用。它还允许您进行自己的配置，甚至检查设置是否有效。

PostCSS Assets

PostssAssets插件是一个方便的CSS文件资源管理器。如果您在URL路径方面遇到问题，这是一个很好的选择，因为PostSS资产将样式表文件与环境变化隔离开来。

您需要定义加载路径、相对路径和基本路径，插件将自动查找您需要的资源。例如，如果需要foobar.jpg图像的正确URL，可以编写以下代码：

body {
 background: resolve('foobar.jpg');
}

Postcss Assets还负责节省缓存，因为如果希望在修改资产时自动更改URL路径，可以将cachebuster变量设置为true。这个智能插件还可以计算图像文件的尺寸（宽度和高度），甚至可以使用预设比例调整它们的大小

CSSNano

如果您需要一个生产站点的优化和缩小的CSS文件，那么有必要查看cssnano。它是一个模块化的插件，由许多较小的单一责任PostSS插件组成。它不仅执行基本的缩小技术，如删除空白，还具有高级选项，使集中优化成为可能。

除了许多其他功能外，cssnano还能够重新调整z-index值、减少自定义标识符、转换长度、时间和颜色值以及删除过时的供应商前缀。

Query表单向导是一个jQuery插件，与某种表格流协助表单创建（不用刷新页面）。举个例子，如果你有一个巨大的表格来输入用户数据，你可以使用表单向导来将其分成一系列相关步骤。这一优点使用户不会被超长表单吓到，并且当用户输入信息时为其提供一些进度指示。

在这篇文章中，我们列出了开发者最喜欢的六大jQuery表单向导，考量了它们的不同功能以及如何创立你自己的向导。这不会是一个冗长的列表，如果你正在寻找一个jQuery表单向导，这一定会为你指明正确的方向。

此列表在2017年8月30日更新，从列表中删除了损坏和弃用的插件，并加入了新的插件来提供开发者要求的功能。

1. jQuery Steps

jQuery Steps是一个智能UI元素，使开发者可以很方便地创建向导界面。这个插件将内容分成区块来形成更有结构和顺序 的页面外观。它有多种功能，例如、状态保持（这会保存你每一步的输入）以及每个区块的过渡效果。它可以通过NuGet或者bower安装，拥有内容和功能丰富的API。

2. jQuery Smart Wizard

Smart Wizard是一个灵活且高度客户化的jQuery步骤向导插件，有Bootstrap支持。它很容易执行，并且可以为你的表单、检出屏幕、注册步骤创建一个整洁而时髦的界面。它的功能包括主题支持（包括了多个主题）、URL导航、步骤选择和动态隐藏或关闭步骤。它可以通过npm、bower和composer安装，拥有内容和功能丰富的API。

3. formToWizard

这个小型插件可以用jQuery将任何网络表格转换成多步骤的向导，每个表格<fieldset>可以转换成具有前进和后退按键的单独步骤。虽然它没有像前两个插件那么多的功能，但它和jQuer确认插件整合，来提供确认功能。它是一个单独的文件（所以你可以从GitHub上将其提取下来），如果JavaScript不可用，它会慢慢的退化。

4. jQuery Stepy

jQuery Stepy是一个生成可客户化表格的向导。它假定表格有特定的结构，其中有特定的类。然后你只需要初始化插件，然后就拥有了表单向导。

此插件没有任何预先设定的风格。但是，它提供了丰富的选择，例如可以在步骤之间导航，提供前进、后退和完成按钮与过渡效果，与任何你选用的确认插件整合。它提供了合理的API，例如允许你触发步骤间的召回，或者当前步骤的确认后的召回。

5. Twitter Bootstrap Wizard

这个Twitter Bootstrap插件利用形式可转换结构建造向导。它允许用户利用按钮来建造一个向导功能，来遍访不同的向导步骤和实践，并分别接入每一步。此插件关键的优势在于它和Bootstrap紧密整合。它有一些基本功能，例如确认、进度条和创建或移除步骤的能力。另外，为了简单地从GitHub中复制插件，它还可以通过Bower（虽然并不推荐）来安装。它有不错的内容且提供了基础的API。

6. jQuery.wizard

最后要介绍的是jQuery.wizard。这是一个不同的表单向导，支持分支——在评论中被要求的功能之一。

基本结构包括步骤和分支，后者是选择性的。一个简单的线性表格可能只要求一个包含所有步骤的分支，但复杂的表格可能要求用到多个分支，甚至是极为复杂的分支。开发者需要处理表单中步骤和分支的数量。向导采用了不同的有限步骤决定怎样自身导航。

这一插件的内容前所未有的丰富，提供了扩展API。它可以通过npm或者Bower来安装，与Internet Explorer 6之后的所有版本兼容。它可以和多种其他插件整合，包括最受欢迎的jQuery Validation。你可以通过复制回复并在浏览器中查看examples/index.html来查看不同的例子。

彩蛋

开源软件的世界很精彩，在为新项目选用插件时可以坐享极丰富的选择。但是，这并不意味着我们应该躲避为有真正作用的软件付费。以下是两种需要付费的表单向导插件。我推荐你们去看一看它们，说不定会对你有用：

• Form Wizard – Multi Step Form Validation（下载链接：https://codecanyon.net/item/form-wizard-multi-step-form-validation/19613591）

• Timon – Step Form Wizard + jQuery Step Form Builder（下载链接：https://codecanyon.net/item/timon-step-form-wizard/15830006）

最后，如果你是那种喜欢弄懂所有事情的原理，不喜欢使用插件，那么你可能会想要看一看以下这些教程，告诉你如何通过探索来创建一个表单向导。

• Turn any webform into a powerful wizard with jQuery（地址：http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/）

• Multistep Form With Progress Bar Using jQuery And CSS（地址：http://talkerscode.com/webtricks/multistep-form-with-progress-bar-using-jquery-and-css.php）

结论

你已经拥有6个jQuery表单向导插件的详尽概览，每一个插件都有不同的功能和特点。根据项目要求来选用它们，希望你可以从这篇文章中找到对你有所帮助的内容。如果有什么遗漏请告知我们，或者通过下方评论告诉我们你最喜欢的插件是哪一个。