写点什么

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:002388
用户头像

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

关注

评论

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

前端 JavaScript 之『防抖』的简单代码实现

编程三昧

JavaScript 编程 大前端 防抖 函数节流

Low-Code能否威胁到专业的程序员?| 话题

三掌柜

试用期 签约计划 人气作者 TOP10

网络攻防学习笔记 Day47

穿过生命散发芬芳

网络攻防 6月日更

SpringCloud Gateway 路由数量对性能的影响研究

中原银行

微服务 SpringCloud Gateway JMH性能基准测试 中原银行

MySQL基础之十五:索引

打工人!

MySQL 6月日更

数据库事务与锁详解

阿骆麦迪

MySQL 事务 6月日更

优雅编程 | 7 个你应该掌握的 JavaScript 编码技巧

devpoint

JavaScrip 6月日更

🌏【架构师指南】分布式ID生成算法技术总结

码界西柚

分布式ID 6月日更

JavaScript 学习(四)

空城机

JavaScript 大前端 6月日更

Java Selector模型

邱学喆

buffer selector SelectableChannel SelectionKey

成为一个面霸需要面试多少回?

escray

极客时间 6月日更

Kubernetes手记(14)- 用户权限系统

雪雷

k8s 6月日更

「SQL数据分析系列」6. 使用集合

Databri_AI

sql 集合

校外培训行业迎来强监管,“教育+区块链”新模式试图解决行业痼疾

CECBC

为什么中间件协议对区块链生态系统至关重要?

CECBC

苹果iOS内购三步曲:App内退款、历史订单查询、绑定用户防掉单!--- WWDC21

37手游iOS技术运营团队

ios wwdc 苹果退款 appstore WWDC21

很多小伙伴问我推荐什么书籍和网课,这次把私藏很久的资料都贡献了(上)

C语言与CPP编程

Java c++ C语言 数据结构与算法 #python

如果把四个消息队列都拉到一个群里,他们会聊些什么?

悟空聊架构

故事 消息队列 群聊 6月日更 悟空聊架构

SpringCloud Gateway 路由转发性能优化

中原银行

微服务 性能优化 SpringCloud Gateway 中原银行

Taro3无埋点的探索与实践

GrowingIO技术专栏

taro AST sdk 无埋点 babel

运维大佬嘲笑我,这个你都不知道?

李阿柯

redis 面试 运维自动化

Flink State 和 Fault Tolerance(一)

Alex🐒

flink 翻译 flink1.13

C++友元的概念和使用的一些介绍

良知犹存

c++

【Vue2.x 源码学习】第十七篇 - 生成 render 函数 - 函数生成

Brave

源码 vue2 6月日更

数字人民币是央行数字货币还是法定数字货币?

CECBC

SpringCloud Gateway 动态路由

中原银行

微服务 SpringCloud Gateway 中原银行

并发王者课-铂金2:豁然开朗-“晦涩难懂”的ReadWriteLock竟如此妙不可言

MetaThoughts

Java 多线程 并发

【21-10】PowerShell 日期和时间

耳东@Erdong

PowerShell 6月日更

5分钟速读之Rust权威指南(二十四)Box

wzx

rust

“懂行”共识拓宽数字通道:川蜀大地与智能时代的“热辣”共振

脑极体

爆场预警!百度大脑开放日-AI赋能软硬件产品创新

百度大脑

百度大脑开放日

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