BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 韩婷 关注 0 他的粉丝 发布于 2016年6月23日. 估计阅读时间: 3 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

近日,来自Facebook的开发者Juriy Zaytsev发布文章称,他们更换了CSS Linter工具,采用了基于PostCSSStylelint作为新的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-importantselector-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)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT