发布在即!企业 AIGC 应用程度测评,3 步定制专属评估报告。抢首批测评权益>>> 了解详情
写点什么

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

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

关注

评论

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

2021年最新整理, C++ 学习资料,含C++ 11 / 14 / 17 / 20 / 23 新特性、入门教程、推荐书籍、优质文章、学习笔记、教学视频等

奔着腾讯去

c++

「绝密档案」“爆料”完整秒杀架构的设计到技术关键点的“情报信息”

洛神灬殇

后端 秒杀系统 秒杀架构 秒杀架构设计 引航计划

乌镇回溯 | 构建网络空间命运共同体,旺链科技做了哪些?

旺链科技

数字经济 产业区块链 世界互联网大会

带你了解数仓安全测试的TLS协议

华为云开发者联盟

安全 通信 密钥 SSL/TLS协议 加密通信

秋招如何抱佛脚?2021最新大厂Java面试真题合集(附权威答案)

Java 架构 面试 程序人生 编程语言

[外文资源]最好的 Golang 博客

baiyutang

golang 9月日更

被客户像小学生一样训话

boshi

创业

android逆向之root方式注入apk

轻口味

android 9月日更

多指标异常检测方法综述

云智慧AIOps社区

AIOPS 异常检测 技术学习 智能运维 指标

基于虹软SDK,适配Camera1、Camera2、CameraX,实现人脸识别(Android)

小驰笔记

android 音视频 人脸识别 引航计划

拒绝裸奔,为 Elasticsearch 设置账号密码(qbit)

qbit

https 安全 Kibana

linux之登录式shell和非登录式shell

入门小站

Linux

Prometheus 2.30.0 新特性

耳东@Erdong

release Prometheus 9月日更

阿里云天池赛题解析——深度学习篇重磅发布!

博文视点Broadview

13个VSCode使用技巧,开启高效的开发模式

华为云开发者联盟

vscode 日志 开发 插件 Git存储库

扒一扒面向对象编程的另一面

华为云开发者联盟

编程 面向对象 对象 对象编程

万亿养老市场如何抢占商机?云巢智慧康养物联网加速器,三招化解ISV痛点!

华为云开发者联盟

物联网 华为云 iotda 沃土云创计划 智慧康养

netty系列之:分离websocket处理器

程序那些事

Java 架构 Netty 程序那些事

太有用,Alibaba架构师十年心血熬成的435网络协议文档

程序员 编程语言 网络协议 TCP/IP

深入浅出Redis宝典,阿里架构师10年经验汇总,PDF免费分享

Java redis 架构

VSCode 中,TS 提示 ”无法找到 *.vue 声明文件“ 的解决方案

编程三昧

vscode Vue3 ts 9月日更

膜拜!不愧是阿里大牛总结的Java10W字面经,Github访问量已破百万

Java 程序员 架构 面试 计算机

分布式系统都要遵守的CAP

卢卡多多

CAP 9月日更

java 虚拟机 GC :G1配置参数

风翱

GC 9月日更

在线黑客帝国文字效果生成工具

入门小站

工具

Python代码阅读(第30篇):找到列表中的奇偶异常项

Felix

Python 编程 Code Programing 阅读代码

网站攻击到提权的全部过程

网络安全学海

黑客 网络安全 信息安全 WEB安全 漏洞分析

P8整理的OpenStack构架,希望能帮助到你

hanaper

网络攻防学习笔记 Day150

穿过生命散发芬芳

9月日更 网络流量分析

详解html5新增的标签与css3中伪类和伪元素

你好bk

html5 css3 大前端 基础技能

月度发布 | 极狐GitLab14.3升级40+新功能!

极狐GitLab

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