• [翻译]纠正PostCSS的4大认识误区


    市面上已经有很多的前端工具,再来引入新的前端工具,价值大不大?这主要取决于,它是否给开发人员提供了新的功能,是否值得花时间和精力去学习和使用?

    PostCSS出现时有一个很有趣的现象。像sass和less这些主要做css预处理的工具,已经有了它们的类别和使用方法的区别。

    让我们先解决一些PostCSS常见的认识误区,这样可以看出它是如何提高你的工作效率,改善你的css编码工作的。

    提示:如果你想了解PostCSS是什么及如何安装使用它,请看《PostCSS简介》,然后再回来看这篇文章。

    误区1-把PostCSS看成是前处理器或后处理器

    先从PostCSS里最容易误解的点说起。

    PostCSS发布时,它被定义和划分为一个“后处理器”。PostCSS插件开始就是使用有效的CSS,并通过各种插件对其进行扩展和处理,不像其它一些预处理器那样,需要特定语法和编译,才可以得到有效的CSS。

    说PostCSS是一个后处理器,也是一种误导的。准确的说应该称它为CSS处理器,PostCSS使用插件,在CSS生成过程中,执行了多个任务对CSS代码进行处理。

    PostCSS的一些插件,也和SASS这些预处理器一样定制了自己的语法,并通过编译把代码转化成有效的CSS。像PostCSS Nested插件,定义了选择器嵌套的语法,其作用和SASS和LESS实现的嵌套相同。其它一些PostCSS插件都是处理有效的CSS,并通过扩展它,去完成样式工作的。其中比较有名的插件Autoprefixer,它会在传入的CSS中,自动为一些样式添加浏览器前缀,然后生成最终的CSS。

    还有一些PostCSS插件,并不处理CSS代码,它只会查看CSS代码。如:Stylelint会去检测CSS,还有像Colorguard会保持CSS中所有颜色值格式一致。

    除了上面说的,PostCSS还可以编译SASS和LESS的源文件,输出标准的CSS。可以通过PostCSS插件,来处理和扩展名为.scss的SASS文件。更详细的下面第2条会说。

    纠正第1个认识误区:PostCSS,即不是预处理也不是后处理。它是一个CSS处理器,可以在工作中,扩展和测试CSS样式代码。

    误区2-PostCSS是另一个像SASS和LESS的预处理器

    开发者一个常见的误解是,PostCSS是另一个像SASS和LESS的预处理器。

    相信很多人使用PostCSS插件,会把注意力放到模仿其它预处理特性上,如变量,条件语句,循环和混入。随着PostCSS的发展,许多其他功能的插件被开发出来,有许多完全和传统的预处理器不同的新特性被引入。

    你可以把PostCSS,当成像SASS和LESS这样的预处理器使用,你也可以用一些像SASS,LESS的扩展,来升级你的工具集。

    PostCSS能够解析CSS和SCSS语法,这样你可以使用PostCSS插件来,保持你原来的编码风格。例如,在当前项目中,我可以使用PostCSS的Stylelint插件,在编译之前就去检测你的SCSS代码。产生的CSS代码,通过Autoprefixer和postcss-assets去添加浏览器前缀和行内图片的dataurl。

    工作流程如下图:

     1457051087workflow

    当然最后,你是否选择使用PostCSS决定权在你。如果你只把它当成预处理器使用,也可以。但想让SASS和LESS这样的预处理工具,具备上面那样新的特性,它们是做不到的。

    误区3-PostCSS会使构建工具更复杂

    前端的工具已经够多的,为什么还要添加一个进来,使工具更复杂呢?这样思考是对的,但你要看你的项目是否需要。

    你可能在不知道的情况下,已经使用了PostCSS。如果你使用过Autoprefixer为CSS添加浏览器前缀,可能你已经使用它了。Autoprefixer是一个PostCSS插件,可以在构建工具的任务中使用,如grunt和gulp工具对应的grunt-postcssgulp-postcss插件。也可以在其它一些构建工具中使用,如Webpack,更多使用方法,请查询PostCSS文档

    当在你的项目中,用没有使用postcss插件的方式,使用了Autoprefixer,我建议你使用它。这样可以让你,在使用其它PostCSS插件时,更容易,结构也更清晰。

    举个例子,如果你在Gulp构建工具中使用Autoprefixer,你的gulpfile.js里的代码应该像下面这样:

    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 ) );

    如果要添加插件,可以像Autoprefixer一样,放到这个数组里。

    如果你的项目用不上Autoprefixer插件,那么可以到postcss.parts上,看看有没有什么可用的插件。

    每个项目和团队需要的插件都是不同的,可以根据自己的情况进行选择。

    把PostCSS集成到你的程序中,不比添加grunt和gulp插件难。PostCSS是一个独立的构建过程,如果可以改善你的CSS工作,那么就不要省略这个构建过程。

    误区4-PostCSS没有比其它预处理器有更多的功能

    这个误区的直接原因是,PostCSS插件模仿了SASS的功能,直接拿PostCSS和SASS,LESS相比。

    在过去的12个月,PostCSS已经添加了许多新的工具。为你提供丰富的插件可供选择。

    如果你觉得PostCSS只有提供了简单的预处理功能,并且坚持使用现在用着的预处理器,我觉得你可以多了解一下。像StylelintPostCSS Statsdoiuse,还有其它许多插件,如:可以为你提供自动化的CSS报告的插件。你之前用的工具是做不到。

    PostCSS还提供了一些优化功能,如SVGCSS minificationg,还提供了比混入更好的解决方案--为样式添加回调函数。

    如果你想试试CSS模块,PostCSS也提供了相应的插件

    更重要的一点,PostCSS才刚刚起步。随着不断发展,会有更多的插件,用来解决CSS相关的问题。查看有哪些用得上的插件,可以在postcss.parts上找一找。

    总之,PostCSS提供了许多预处理器无法完成的功能。可以花点时间想想,怎样做可以更容易扩展你的工具集。

    总结

    PostCSS是一款功能强大的CSS处理工具,可以提高前端开发人员的工作效率。它会变成越来越完善的工具,并能高效地解决常见的CSS样式,预处理和书写问题。

    如果你之前已经知道PostCSS,但出于一些原因没有使用它,那么建议你再详细了解一下,这个可以大大提高前端工作效率的工具。

    原文:PostCSS Mythbusting: Four PostCSS Myths Busted

    原文链接:http://www.sitepoint.com/postcss-mythbusting/

  • 相关阅读:
    翻译《Writing Idiomatic Python》(三):变量、字符串、列表
    Jetson TK1刷机+配置Mini PCI-e无线网卡
    翻译《Writing Idiomatic Python》(二):函数、异常
    翻译《Writing Idiomatic Python》(一):if语句、for循环
    用Python和摄像头制作简单的延时摄影
    安卓加固之so文件加固
    Windbg+VirtualBox双机调试环境配置(XP/Win7/Win10)
    Sizeof Class
    32位和64位系统内核函数调用从ZwProtectVirtualMemory到NtProtectVirtualMemory
    JNI注册调用完整过程-安卓4.4
  • 原文地址:https://www.cnblogs.com/wengxuesong/p/5466969.html
Copyright © 2020-2023  润新知