写点什么

Facebook 使用 Stylelint 以期保证 CSS 代码质量

  • 2016-06-22
  • 本文字数:1013 字

    阅读完需:约 3 分钟

近日,来自 Facebook 的开发者 Juriy Zaytsev 发布文章称,他们更换了CSS Linter 工具,采用了基于 PostCSS Stylelint 作为新的 Linter 工具,以期保证 CSS 代码质量。

上千名工程师,多条不同产品线,庞大代码库,日渐增加的新特性……种种特点加在一起,给 Facebook 的代码质量管理带来了独特的挑战。而如何保证上千份不停变换的 CSS 文件质量,对于 Facebook 来说,也是非常头疼的问题。Facebook 为了解决这个问题,采用了 Code Review、代码样式规范、重构以及自建的 CSS Linter 等手段。

然而,Facebook 对之前自建的 CSS Linter 并不满意。该 Linter 是基于正则表达式来对 CSS 进行约束的,因此,所设定的每一个检测规则都需再去设定相应的匹配规则,并且要去遍历整个文件进行检测,这不仅难以维护,而且性能很差。

CSS 本身是一门语言,把它当做纯文本文件,采用正则表达式来处理并不是一个好选择。而换种思路,采用抽象语法树的方式来构建一个解析器,则会在性能上有比较不错的提升。

此时,基于 PostCSS 的 Stylelint 走进了 Facebook 的视野。Stylelint 提供了完整的抽象语法树的访问方式,因此,使用者可以快速访问具体的代码节点、传入一些基本函数。这可以大大增强检测规则可读性和可维护性,正是 Facebook 所想要的。

Facebook 理所当然地选择了 Stylelint,并在具体的使用过程中对 Stylelint 进行了完善,针对旧 Linter 的痛点添加了功能。

Facebook 所采用的 Stylelint 内置规则包括: declaration-no-important selector-no-universal , 以及 selector-class-pattern 。Stylelint 还可以添加自定义规则,具体的添加方法可以参考 built-in plugin mechanism 。同时,Facebook 也为 Stylelint 贡献了一些规则插件

Stylelint 尚有不完善的地方,例如没有提供自动格式化与修正功能,而人工修正会浪费开发者大量的时间。因此,Facebook 正着手为其添加自动格式化与修正功能,这将为 Stylelint 用户带来极大的便利。

同时,Facebook 选择了 Jest 框架进行单元测试,来检测当前所处的环境是否是 CSS 文件。

Juriy Zaytsev 提到,换一个靠谱的 CSS Linter 工具只是保证高质量的 CSS 的代码的第一步,Facebook 还打算添加更多的自定义的规则,设法达到使用规则的最佳实践以及制定统一的代码规范。


感谢郭蕾对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们。

2016-06-22 19:002213
用户头像

发布了 28 篇内容, 共 17.2 次阅读, 收获喜欢 29 次。

关注

评论

发布
暂无评论
发现更多内容

产品经理训练营 Week03

柚子君~

产品经理训练营

驱动力读书笔记之二

张老蔫

28天写作

Elastic开源协议修改限制用户,星环科技自研New Search青出于蓝

星环科技

产品训练营·第三周作业

产品经理训练营

K8S原生存储持续进化,Longhorn 1.1迎来ARM支持

Rancher

站出来打造真正开源的 Elasticsearch

亚马逊云科技 (Amazon Web Services)

第三周总结

岛乾坤

架构师训练营第五周作业 - 命题作业

阿德儿

产品经理训练营 - 第三次作业

Jophie

产品经理训练营

《期权合同》常见的一个大坑,99%中招 | 视频号28天(26)

赵新龙

28天写作

大数据两万年

大伟

大数据 GFS

阿里面试败北后,苦刷Java天梯图28天,成功斩获滴滴50W年薪offer

Java架构师迁哥

第三周作业-相关方分析

Au revoir

第三周作业

岛乾坤

5G专网是个大西瓜(一):价值之问

脑极体

webpack | 进阶用法3:如果将代码打包成一个通用JS库。

梁龙先森

大前端 webpack 28天写作 2月春节不断更

架构师训练营第五周作业 - 学习总结

阿德儿

集群迁移自由来啦!4步将Rancher迁移至任意K8S发行版

Rancher

从CI/CD持续集成部署到DevOps研发运维一体化

xcbeyond

DevOps 持续集成 CI/CD 持续部署 28天写作

是的,奈学教育一周年了!

古月木易

奈学教育

清华大学团队:人脸识别爆出巨大丑闻,15分钟解锁19款手机

香芋味的猫丶

网络安全 信息安全 人脸识别 刷脸支付 支付安全

AI进商超:智能视觉秤减轻操作员负担,果蔬称重不再排队

百度大脑

安全,稳定

raox

第三周作业

Geek_72d5ab

产品手记--2

曦语

给予你关注产品的利益相关者,想想他们的问题,自己设定一些前提,做个简单的排序。

戎帅

解决方案的设计

让我思考一会儿

今日姑苏佳景,俨然数字园林

脑极体

一带一路上的中国品牌!AWS 助力中国新能源车企走向世界!

亚马逊云科技 (Amazon Web Services)

产品训练营--第三期作业(2)

曦语

产品训练营

速成算法笔记,Github上已收获近60K+star!力压LeetCode只为面试

程序员 面试 算法

Facebook使用Stylelint以期保证CSS代码质量_Meta_韩婷_InfoQ精选文章