Facebook使用Stylelint以期保证CSS代码质量

近日,来自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的痛点添加了功能。

selector-class-pattern。Stylelint还可以添加自定义规则,具体的添加方法可以参考built-in plugin mechanism。同时,Facebook也为Stylelint贡献了一些规则和插件。

Stylelint尚有不完善的地方,例如没有提供自动格式化与修正功能,而人工修正会浪费开发者大量的时间。因此,Facebook正着手为其添加自动格式化与修正功能,这将为Stylelint用户带来极大的便利。

同时,Facebook选择了Jest框架进行单元测试,来检测当前所处的环境是否是CSS文件。

Juriy Zaytsev提到,换一个靠谱的CSS Linter工具只是保证高质量的CSS的代码的第一步,Facebook还打算添加更多的自定义的规则,设法达到使用规则的最佳实践以及制定统一的代码规范。
本文转自d1net(转载)

时间: 2024-09-25 11:14:19

Facebook使用Stylelint以期保证CSS代码质量的相关文章

Facebook 使用 Stylelint 以保证 CSS 代码质量

近日,来自Facebook的开发者Juriy Zaytsev发布文章称,他们更换了CSS Linter工具,采用了基于PostCSS的 lint作为新的Linter工具,以期保证CSS代码质量. 上千名工程师,多条不同产品线,庞大代码库,日渐增加的新特性--种种特点加在一起,给Facebook的代码质量管理带来了独特的挑战.而如何保证上千份不停变换的CSS文件质量,对于Facebook来说,也是非常头疼的问题.Facebook为了解决这个问题,采用了Code Review.代码样式规范.重构以及

Facebook:CSS 的质量提升与展望

与成千上万的facebook工程师在这纷繁复杂的产品线中相互协作, 代码质量通常面临独特的挑战. 我们不仅需要处理庞大的数据库, 还需要跟上时代发展的节奏 -- 新增功能的上线. 已有功能的改善, 甚至是产品重组的需要. 对于CSS来说,这意味着成千上万的文件在一个不断变化的状态中. 即使我们已经尽力通过代码回顾.风格指导,甚至是重构等方式去确保css代码的质量,然而无意的小错误依然可以让我们措手不及. 直到最近,我们使用的还是一款我们自主开发的CSS检测器(CSS linter)去获取一些基本

敏捷过程中如何保证代码质量

本文目录:一.为什么要做代码质量分析二.常见的代码质量分析工具三.DevOps平台中的代码质量分析四.DevOps平台中如何为代码质量提供保障 一.为什么要做代码质量分析 本文讲的是敏捷过程中如何保证代码质量,在软件开发过程中,当一个功能开发完成后,如何去保证代码是可用的.没问题的?一般情况下,基本都会有单元测试.每日构建.功能测试等环节来保证.但是,保证代码可用就够了吗?显然不是. 一个软件项目开发完一个版本会有下一个版本,会有新的需求,原来的功能也可能会变更.你写的代码可能会被别人使用,你也

编写现代CSS代码的20个建议

明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习: .square {         width: 80px;         height: 80px;     }       .red {         background-color: #F44336;         margin-bo

11步提高代码质量和整体工作效率

  这篇文章要介绍的,是我作为专业程序员这些年来学到的能真正提高我的代码质量和整体工作效率的11件事情. 1. 永远不要复制代码 不惜任何代价避免重复的代码.如果一个常用的代码片段出现在了程序中的几个不同地方,重构它,把它放到一个自己的函数里.重复的代码会导致你的同事 在读你的代码时产生困惑.而重复的代码如果在一个地方修改,在另外一个地方忘记修改,就会产生到处是bug,它还会使你的代码体积变得臃肿.现代的编程语 言提供了很好的方法来解决这些问题,例如,下面这个问题在以前很难解决,而如今使用lam

CSS代码缩写技巧

css|技巧 Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里.影响速度的因素有很多种,包括Web服务器的速度.访问者的Internet连接情况,以及浏览器必须下载的文件大小.尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小. 为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量.由于CSS样式表是纯文本文件,和图像相比相对较小,所以Web

如何提高代码质量(管理篇):代码复查

也许你是一位项目经理,也许你是一位项目骨干成员,或者开发小组长.在我发表"如何提高代码质量"的这一系统文章后,有许多网友都向我抱怨,说他无法把握整个项目组成员的代码质量.我想,这也是所有项目组普遍存在的问题吧,它通常表现为以下几个问题: 软件项目普遍存在的问题 1)新手.任何项目组成员都不可避免地出现新手,他们往往是刚刚从大学毕业的学生.这些新手由于软件开发时间太短,往往技术不成熟,没有形成良好的开发习惯,所以编写代码质量较差,问题很多.他们常常成为项目组的"鸡肋"

使用Sass来编写面向对象的CSS代码

  自从2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以来.它就成为一个领先的模块系统,用来组织你的CSS代码方式之一. OOCSS不同于其他组织CSS代码方法,比如SMACSS或者BEM.通过将CSS代码和结构分离让你的模块可重用.事实上,我也通常将SMACSS与OOCSS混为一谈. OOCSS.SMACC和BEM在CSS中是很有内涵的东东,早就在W3cplus站点上有相关内容科普过.可以说理解了这些内容将能更好的帮助您组织.管理您的CSS代码

提高编写CSS代码效率的10个习惯

  这篇文章介绍了提高编写CSS代码效率的10个习惯,看了觉得不错,大家可以学习一下.文章底部有原文链接. 1.保持一贯性. 就像其它的任何事一样,值得一直保持一贯性.保持连贯性,而不是想到什么就给id和class命名什么. CSS的级联样式有利于加深你的记忆,而且充分利用样式的继承去设置样式表. 首先声明通用的部分的样式,然后继续声明不通用的.这样当你需要的时候更容易的去覆盖一个特定的样式.因为样式更易于阅读和更具逻辑性,你会发现编写CSS更迅速. 使用一种最是适合你的方式. 复位和覆盖 链接