写点什么

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

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

关注

评论

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

orbeon form 通过 url 的方式同第三方应用集成的开发明细

汪子熙

Java SAP commerce form 9月月更

还不了解堆栈和队列吗?数据结构最基础、最重要的概念必须掌握!

wljslmz

数据结构 堆栈 队列 9月月更

九月书单

图灵社区

科普 计算机 新书

APISIX是怎么跑起来的

geange

lua api 网关 APISIX 网关 APISIX的源码解析

小程序化:系统集成行业降本增效的破局思考

FinClip

new Vue的时候到底做了什么

bb_xiaxia1998

Vue

VUE 数据分页

HoneyMoose

Java中Interface天天都在写,你知道其背后的原理是什么吗?

wljslmz

Java 接口 9月月更

大数据ELK(八):Elasticsearch安装IK分词器插件

Lansonli

ES 9月月更

从URL输入到页面展现到底发生什么?

loveX001

JavaScript

一道React面试题把我整懵了

beifeng1996

React

【web开发基础】PHP快速入门(5)-PHP运算符之算术运算符和字符串运算符详解

迷彩

运算符 php开源 9月月更 web开发基础 算术运算符

Java进阶(三十七)java 自动装箱与拆箱

No Silver Bullet

Java 9月月更 自动装箱 拆箱

仅需30行代码,轻松集成HMS Core视频编辑服务屏幕录制能力

HarmonyOS SDK

编辑 视频

面试官让你说说react状态管理?

beifeng1996

React

keep move!滑动窗口中位数与滑动魔方

掘金安东尼

算法 9月月更

vue项目性能优化-前端加分项

bb_xiaxia1998

Vue

【云原生 | 从零开始学Kubernetes】十三、k8s的容器探测以及启动探测

泡泡

云计算 容器 云原生 k8s 9月月更

禅道项目管理软件App使用

禅道项目管理

项目管理 App 禅道

面向对象设计原则,历久弥新

有态度的马甲

国庆节,零代码帮你搞定假期美食菜单,体验赢定制好礼

华为云开发者联盟

人工智能 企业号九月金秋榜

UI 自动化测试应不应该投入?有没有前途?怎样做最明智?

测吧(北京)科技有限公司

测试

【web 开发基础】php 开发基础快速入门 (4)-PHP常量详解

迷彩

php 常量 9月月更 魔术常量

透视星环科技上市:基础工具、技术融合、场景应用三维击穿

易观分析

数据

P5~P9应该具备的核心能力是什么

博文视点Broadview

sentinel-dashboard-apollo 1.8.5 发布,支持 apollo 持久化的定制版

铁匠

九月书单

图灵教育

科普 计算机 新书

2022年中国HR SaaS行业洞察

易观分析

HR SaaS

互联网进入存量博弈时代,小程序技术创造移动应用新机遇

FinClip

finclip

物联网平台常见问题与答案汇总

阿里云AIoT

数据 物联网平台 物联网 协议 mqtt

Ohos-MPChart——支持多种图表绘制的组件

OpenHarmony开发者

OpenHarmony

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