postcss_PostCSS神话：四个PostCSS神话被打破

postcss

With the introduction of any new front-end tool, there comes the important questions with regard to its potential value in an already congested marketplace. Does it offer developers anything new? Is it going to be worth investing the time and effort to learn and implement it?

随着任何新的前端工具的推出，有关其在已经拥挤的市场中的潜在价值提出了重要的问题。 它为开发人员提供了新的东西吗？ 花费时间和精力来学习和实施它值得吗？

Since its inception, PostCSS has faced an interesting problem. With it vying for attention in a reasonably mature area alongside established CSS tooling such as Sass and Less, there have been a number of misconceptions made relating to its categorization and use.

自成立以来， PostCSS面临着一个有趣的问题。 与成熟CSS工具(如Sass和Less)一起在相当成熟的领域争夺注意力，人们对其分类和使用产生了许多误解。

So let’s address some of the most common myths around PostCSS and in doing so show how it can enhance your workflow and improve how you work with CSS.

因此，让我们解决有关PostCSS的一些最常见的误解，并说明这样做如何改善您的工作流程并改善CSS的工作方式。

N.B. If you want to find out more about what PostCSS actually is and how to set it up, check out this introduction to PostCSS and then come back here for some mythbusting!

注意：如果您想了解有关PostCSS实际上是什么以及如何进行设置的更多信息，请查看PostCSS简介 ，然后再回到这里进行一些神秘报道！

误解1 – PostCSS是前置或后置处理器 (Myth 1 – PostCSS is a Pre or a Postprocessor)

Let’s start with perhaps the biggest point of confusion relating to PostCSS.

让我们从与PostCSS相关的最大困惑开始。

When PostCSS was first released, it was promoted and categorized as being a ‘Postprocessor’. Many of the first PostCSS plugins took valid CSS and extended it in some way, rather than the previously familiar approach taken by preprocessors of taking custom syntax and compiling it into valid CSS.

当PostCSS首次发布时，它被提升并归类为“后处理器”。 许多第一个PostCSS插件采用了有效CSS并以某种方式对其进行了扩展，而不是预处理器采用自定义语法并将其编译为有效CSS之前所熟悉的方法。

To call PostCSS a postprocessor is somewhat misguided and actually plays down its capabilities. I prefer to refer to it simply as a CSS Processor, as it can perform a number of different tasks, using PostCSS plugins, at several points in your CSS authoring process.

称PostCSS为后处理器有点误导了，实际上削弱了它的功能。 我更喜欢将它简单地称为CSS处理器，因为它可以使用PostCSS插件在CSS创作过程中的多个点执行许多不同的任务。

A number of PostCSS plugins take custom syntax and convert it into valid CSS, as you would associate with a conventional preprocessor like Sass. One such example would be the PostCSS Nested plugin which lets you nest selectors – in the same way that Sass and Less implement selector nesting. Other PostCSS plugins take valid CSS and extend it, such as PostCSS’s most well-known plugin, Autoprefixer, which adds vendor prefixes automatically to your stylesheet.

许多PostCSS插件采用自定义语法并将其转换为有效CSS，就像您与常规预处理器(如Sass)关联一样。 一个这样的示例就是PostCSS Nested插件，该插件可让您嵌套选择器-与Sass和Less实施选择器嵌套的方式相同。 其他PostCSS插件采用有效CSS并对其进行扩展，例如PostCSS最著名的插件Autoprefixer ，该插件会自动将供应商前缀添加到样式表中。

Some PostCSS plugins don’t actually transform your CSS at all, but instead provide useful insights into your styles. Stylelint can be used to lint your CSS, while a plugin like Colorguard can help you to maintain a consistent color palette across a project.

一些PostCSS插件实际上并没有真正改变CSS，而是为您的样式提供了有用的见解。 Stylelint可以用于整理 CSS，而Colorguard之类的插件可以帮助您在整个项目中保持一致的调色板。

In addition to all of this, PostCSS can parse SCSS syntax as well as standard CSS. This means that you can extend your Sass .scss files with PostCSS plugins – something which we will go into in more detail in Myth 2.

除了所有这些，PostCSS可以解析SCSS语法以及标准CSS。 这意味着你可以扩展你的无礼.scss与PostCSS插件文件-这是我们将在神话2进入更多的细节。

So to bust our first myth — PostCSS is neither a Pre or a Post–processor. It is a CSS Processor that can extend or report on your styles at a number of different points in your workflow.

因此，要打破我们的第一个神话-PostCSS既不是Pre处理器也不是Post-processor。 它是一个CSS处理器，可以在工作流中的许多不同点扩展或报告样式。

误解2 – PostCSS是Sass和Less等预处理器的替代方案 (Myth 2 – PostCSS is an Alternative to Preprocessors like Sass and Less)

A common misconception among developers is to compare PostCSS as an alternative to already existing preprocessing tools such as Sass and Less.

在开发人员中，一个普遍的误解是将PostCSS作为Sass和Less等现有预处理工具的替代方案进行比较。

I believe this to be down to the fact that a number of the first PostCSS plugins focused on emulating features commonly seen in preprocessors, such as variables, conditionals, loops and mixins. As the PostCSS community has grown, a much more diverse range of plugins has emerged, offering a number of features that differentiate it from traditional preprocessors.

我认为这归结为以下事实：许多第一个PostCSS插件专注于模拟预处理器中常见的功能，例如变量，条件，循环和混合。 随着PostCSS社区的发展，出现了种类繁多的插件，提供了许多使其与传统预处理器区分开的功能。

So although you could use PostCSS as an alternative to using a preprocessor like Sass or Less, you could alternatively power-up your existing toolset by extending the features of your favourite preprocessor.

因此，尽管您可以使用PostCSS代替使用诸如Sass或Less之类的预处理器，但也可以通过扩展您喜欢的预处理器的功能来增强现有工具集的功能。

PostCSS is capable of parsing both CSS and SCSS syntax, which means that you can use PostCSS plugins to transform your styles both before and after your Sass compilation step. For example, on a current project I use PostCSS to lint my Sass files using Stylelint before it is compiled into CSS. The resulting CSS is then extended with plugins like Autoprefixer and postcss-assets to add vendor prefixes and inline image assets as data URIs. So your workflow could look something like this:

PostCSS能够解析CSS和SCSS语法 ，这意味着您可以在Sass编译步骤之前和之后使用PostCSS插件来转换样式。 例如，在当前项目中，在将Stylelint编译成CSS之前，我使用PostCSS来使用Stylelint整理Sass文件。 然后，使用诸如Autoprefixer和postcss-assets之类的插件扩展生成CSS，以添加供应商前缀和内联图像资产作为数据URI。 因此，您的工作流程可能如下所示：

Ultimately, how you choose to use PostCSS is up to you. If you want to use it as your sole CSS processing tool, you can certainly do that. But if you’re perfectly happy using Sass or Less, consider that PostCSS is equally capable of working alongside those tools to provide additional features that your preprocessor cannot.

最终，如何选择使用PostCSS取决于您。 如果您想将其用作唯一CSS处理工具，则可以做到这一点。 但是，如果您对使用Sass或Less感到非常满意，请考虑使用PostCSS同样能够与这些工具一起使用，以提供预处理器无法提供的其他功能。

误解3 – PostCSS只会使我的工具更加复杂 (Myth 3 – PostCSS Will Just Make My Tooling More Complex)

I know what you’re thinking. The front-end tooling landscape is already overflowing with choice — why add another tool into the mix and potentially make your build process more complicated? That is a valid concern, but one that you will need to evaluate for yourself on the projects you work on.

我知道你在想什么 前端工具领域已经充满了选择的余地-为什么要在组合中添加另一个工具，并可能使您的构建过程变得更加复杂？ 这是一个有效的关注点，但是您需要自己对正在从事的项目进行评估。

You may already be using PostCSS without realising it. If you use Autoprefixer to add vendor prefixes to your CSS, then you are already using PostCSS. Autoprefixer is a PostCSS plugin that can be implemented into common task runners such as Grunt and Gulp with the grunt-postcss or gulp-postcss plugins. There are also solutions available if you are using different workflow tools such as Webpack – check out the PostCSS documentation for more information on this.

您可能已经在使用PostCSS而没有意识到。 如果使用Autoprefixer将供应商前缀添加到CSS，则您已经在使用PostCSS。 Autoprefixer是一个PostCSS插件，可以通过grunt-postcss或gulp-postcss插件实现到常见任务运行程序(例如Grunt和Gulp)中。 如果您使用的是不同的工作流工具(例如Webpack)，也可以使用解决方案- 有关详细信息，请查阅PostCSS文档 。

If you aren’t using these plugins when using Autoprefixer in your projects, I’d recommend that you update your project to do so. Including it in this way has the benefit of allowing you to include other PostCSS plugins very easily. So for example, if I was using Autoprefixer with Gulp, my code would look like this:

如果在项目中使用Autoprefixer时未使用这些插件，则建议您更新项目以这样做。 以这种方式包含它的好处是允许您非常轻松地包含其他PostCSS插件。 因此，例如，如果我在Gulp中使用了Autoprefixer，我的代码将如下所示：

return gulp.src( ['/**/*.css'] )
  // PostCSS tasks to be run on our CSS files
  .pipe( postcss([
    autoprefixer({
      browsers: [
        '> 5%',
        'last 2 versions',
        'ie > 7'
      ] 
    }) // Autoprefixes CSS properties for various browsers
    … // any other PostCSS plugins to be run can be added in here
]) )
.pipe( gulp.dest( CSS_DEST_PATH ) );

As you can see, additional plugins can just be added alongside your Autoprefixer reference, as and when you want to include them in your process.

如您所见，可以在需要时将其他插件添加到Autoprefixer参考旁边。

If you don’t use Autoprefixer for whatever reason, then I’d advise you to take a look at the other PostCSS plugins available. Each project and development team is different and only by going through the available plugins will you be able to judge if there is something that can help you and your team when authoring your CSS.

如果您出于某种原因不使用Autoprefixer，则建议您查看其他可用的PostCSS插件 。 每个项目和开发团队都是不同的，只有通过使用可用的插件，您才能判断在编写CSS时是否有可以帮助您和您的团队的东西。

Including PostCSS as part of your process is no more complicated than adding any other Grunt or Gulp plugin. Don’t dismiss it because it’s another build step; if that step helps you improve how you work with your CSS, it’s one worth considering.

在过程中包括PostCSS并不比添加任何其他Grunt或Gulp插件复杂。 不要忽略它，因为这是另一个构建步骤。 如果这一步骤可以帮助您改善CSS的使用方式，那么这是值得考虑的一项。

误解4 – PostCSS无法提供我当前的预处理器无法提供的任何功能 (Myth 4 – PostCSS Doesn’t Offer Me Anything That My Current Preprocessor Doesn’t Provide Me With)

This myth stems from PostCSS being compared directly to preprocessors such as Sass and Less — in particular, the PostCSS plugins that emulate Sass functionality.

这个神话源于将PostCSS直接与Sass和Less等预处理器进行比较，尤其是模仿Sass功能的PostCSS插件。

PostCSS has grown as a tool a lot in the last 12 months. Although these plugins are still available, there is a much richer choice of plugins that offer a great deal of variety in what they can do.

在过去的12个月中，PostCSS已经成为一种工具。 尽管这些插件仍然可用，但是有很多可供选择的插件，它们可以提供多种功能。

If you’re perfectly happy using your current preprocessor and have previously dismissed PostCSS as simply providing the same features, I’d advise you to take another look. Plugins such as Stylelint, PostCSS Stats and doiuse, among others, can provide automated reporting on your CSS – something that a conventional preprocessor cannot do.

如果您对使用当前的预处理器感到非常满意，并且以前不认为PostCSS提供了相同的功能，则建议您再看一遍。 诸如Stylelint ， PostCSS Stats和doiuse之类的插件可以在CSS上提供自动报告，这是常规预处理器无法做到的。

It can also provide automated optimisations, such as for SVG or CSS minification and provides a more elegant solution for adding fallbacks to your styles than using mixins.

它还可以提供自动优化，例如SVG或CSS最小化，并且比使用mixin提供更优雅的解决方案来为样式添加后备。

If you want to try experimenting with CSS modules, PostCSS also offers plugins that can help you with that.

如果您想尝试CSS模块 ，PostCSS还提供了可以帮助您的插件 。

The key thing to remember about PostCSS is that is still a relatively new tool. As the community continues to grow, more plugins are being created that solve a variety of interesting CSS development problems. Check out the current catalog of plugins available on the postcss.parts site to see what’s currently available.

关于PostCSS要记住的关键是，它仍然是一个相对较新的工具。 随着社区的不断发展，正在创建更多的插件来解决各种有趣CSS开发问题。 在postcss.parts网站上查看当前可用插件目录，以查看当前可用的插件。

In short, PostCSS offers a whole variety of unique features that aren’t possible using other preprocessors. Take the time to look through what’s available, as you will probably find that you can easily extend the featureset of your current preprocessor.

简而言之，PostCSS提供了各种独特的功能，而其他预处理器则无法实现。 花点时间浏览可用的功能，因为您可能会发现可以轻松扩展当前预处理器的功能集。

综上所述 (In summary)

PostCSS is a powerful CSS Processing tool which can enhance any front-end developers workflow. It is very quickly becoming more mature as a tool and offers some very elegant solutions to common CSS, and preprocessor, authoring problems.

PostCSS是功能强大CSS处理工具，可以增强任何前端开发人员的工作流程。 它作为一种工具变得非常成熟，并为常见CSS和预处理器，编写问题提供了一些非常优雅的解决方案。

If you’ve looked at PostCSS previously and dismissed it for whatever reason, I’d advise you to take another look; it is a tool that can enhance any front-end development workflow.

如果您以前看过PostCSS并出于任何原因将其关闭，我建议您再看一遍； 它是可以增强任何前端开发工作流程的工具。

翻译自: https://www.sitepoint.com/postcss-mythbusting/

postcss