报名参加CloudWeGo黑客松,奖金直推双丰收! 了解详情
写点什么

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

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

关注

评论

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

一站式智能化是采购数字化的大趋势

BeeWorks

【等保小知识】等保与关保两者之间有啥区别?

行云管家

网络安全 等级保护 分保 关保

具有中国特色的堡垒机到底有用吗?有什么用?

行云管家

网络安全 信息安全 数据安全 堡垒机

React Native 与 嵌入Android原生与Activity页面互相跳转

android 程序员 移动开发

react-native Navigation导航器,kotlin协程使用

android 程序员 移动开发

MotionLayout_ 打开动画新世界大门 (part II),android插件化原理

android 程序员 移动开发

毕业总结和毕业设计

cherrycheek

React Native Android混合开发实战教程(1),flutter瀑布流

android 程序员 移动开发

python3如何安装MySQLdb库

YUKI0506

Python3 mysqldb

直呼内行!阿里大佬离职带出内网专属“高并发系统设计”学习笔记

编程 程序员 消息队列 高并发系统

MVVM系列之一:Lifecycle,面试竟然被这31道Android基础题难倒了

android 程序员 移动开发

OkHttp 3,安卓移动开发大作业

android 程序员 移动开发

OkHttp3源码详解之拦截器(四),计算机应届毕业生面试题

android 程序员 移动开发

分享 | 一文了解 PG PITR 即时恢复

RadonDB

数据库 postgresql RadonDB

React Native Android混合开发实战教程,Android入门你值得拥有

android 程序员 移动开发

React Native Android 源码框架浅析(主流程及 Java 与 JS 双边通信)

android 程序员 移动开发

实验室信息系统的主要功能及作用

低代码小观

企业管理 管理系统 LIMS实验室信息管理系统 信息管理系统 实验室

Okhttp的缓存机制,原理讲解

android 程序员 移动开发

OOM问题原理解析(二),移动端开发技术

android 程序员 移动开发

QQ音乐Android编译提速之路,腾讯T2大牛亲自讲解

android 程序员 移动开发

OkHttp 断点上传的“基操”(1),完美讲解内存缓存LruCache实现原理

android 程序员 移动开发

OkHttp流程分析,音视频编解码技术

android 程序员 移动开发

React Native 与 嵌入Android原生与Activity页面互相跳转(1)

android 程序员 移动开发

RecyclerView 事件分发原理实战分析,历经30天

android 程序员 移动开发

Java线程安全ReentrantLock

FunTester

Java 性能测试 线程安全 测试开发 FunTester

Native开发工具之CPU 和架构(三),学习Android开发的步骤,

android 程序员 移动开发

OkHttp 断点上传的“基操”,算法题+JVM

android 程序员 移动开发

OKio源码分析(1)six sy007 情感导师,android面试题2019

android 程序员 移动开发

网易云信亮相 LiveVideoStackCon 2021,解构自研大规模传输网 WE-CAN

网易云信

通信云 传输协议

「元宇宙」赛道,除了脸书,微软也来了

BeeWorks

MVVM系列之二:LiveData,android程序开发教程

android 程序员 移动开发

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