写点什么

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

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

关注

评论

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

时序数据库 TDengine + Tableau,数据可视化一步到位!

TDengine

数据库 tdengine 时序数据库

计算机网络协议介绍

京东科技开发者

升级数智底座:企业AI规模化应用的“中国解法”

用友BIP

科技 用友BIP 数智底座 国产大模型 企业AI

去中心化云算力(PowerVerse)是如何提供算力服务的?

PowerVerse

智能合约 去中心化 算力 #区块链 AI‘’

高质发展,匠心智造!狄耐克荣获“2025年度中国精工品牌”荣誉称号

新消费日报

一篇论文,看见百度广告推荐系统在大模型时代的革新

百度Geek说

百度

第一期开讲!北京国家会计学院“数智财务高端人才”培养项目

用友智能财务

财经 会计

时序数据库 TDengine Cloud 私有连接实战指南:4步实现数据安全传输与成本优化

TDengine

数据库 tdengine 时序数据库

国产替代势不可挡:大型企业ERP国产替代的挑战与机遇

用友BIP

ERP 国产替代 用友BIP 数智底座

践行低碳行动!北京地铁签约用友

用友BIP

数智化 用友BIP 智能财务 北京地铁

Cursor 在前端需求开发工作流中的应用|得物技术

得物技术

前端 AI‘’ cursor

【等保小知识】等保3.0出了吗?啥时候发布的?

行云管家

网络安全 等保 等保测评

京东中台化底层支撑框架技术分析及随想

京东科技开发者

无需登录+离线调试,Apipost比Apifox更值得拥有

数据追梦人

shopeeAPI 系列:商品列表接口接入与应用

tbapi

Shopee shopee商品列表接口

如何在线绘制roadmap路线图?5个简单易用的路线图软件盘点!

职场工具箱

在线白板 办公软件 AIGC 路线图 技术路线图

实习期间如何提升留用概率?

王中阳Go

Go 实习 厚度按

shopee商品详情API接口(shopee API系列)

tbapi

Shopee shopee商品数据采集 shopee商品数据分析 shopee接口

Web Components实践:如何搭建一个框架无关的AI组件库

京东科技开发者

谁在买王兴兴的机器人?「宇树科技」百笔订单梳理、分析!

机器人头条

科技 大模型 人形机器人 具身智能

爬虫 API 科普:一文搞懂网络数据抓取的门道

代码忍者

API 接口

飞机电气系统技术分析:数字样机技术引领创新

DevOps和数字孪生

KubeEdge边缘设备管理系列(五):Mapper-Framework设备数据写入

华为云原生团队

云计算 容器 云原生

音乐NFT项目的技术架构

北京木奇移动技术有限公司

区块链技术 软件外包公司 音乐NFT

智能制造常见系统,ERP、MES、WMS、SCM、PLM,一文吃透!

积木链小链

户外全彩LED屏幕可以做成什么样的造型?

Dylan

广告 LED LED display LED显示屏 LED屏幕

如何在API中实现搜索和过滤功能

数据追梦人

电力生产和供应业需要堡垒机的情形简单聊聊

行云管家

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

企业级软件定制:摒弃“银弹思维”,回归场景务实求解

TechLead Studio

软件研发

2025年智能ITSM产品推荐

云智慧AIOps社区

ITSM ITSM软件 工单管理 工单系统

诚邀加入天翼云用户体验官计划:您的洞察,重塑科技边界!

天翼云开发者社区

云计算

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