Meta开源自家产品所使用的网页接口样式系统StyleX,其结合了CSS-in-JS函数库的开发体验,和静态CSS的性能和可扩展性。官方指出,StyleX经过精心设计,并解决之前团队无法封装和扩展样式组件的问题。

StyleX支持CSS的表达性子集,避免使用复杂的选择器,确保生成的CSS不会出现特定冲突。StyleX并不全面支持CSS的功能(Feature),而是专注于对大型应用程序和组件函数库中最有用,被认为具有表达力,且易于管理和维护的功能。

而且StyleX将样式转换与组织成为原子CSS类别名称,用户不需要学习或是管理实用类别名称函数库。也就是说,StyleX的样式经过优化,拆分成更小、更具体的部分,每一个原子类别对应一个具体的样式规则,像是一个类别仅代表边距大小或是字体颜色,通过减少重复的CSS程序代码,使样式更加一致可预测。

在传统的CSS框架中,开发者会需要学习和使用大量的实用类别,虽然这些类别替常见样式提供方便的使用方法,但StyleX自动将样式转换成为更精细的类别,仅需要专注于样式的实际应用,不需要开发者额外学习和管理这些类别。

此外,StyleX允许样式在文件和组件边界间进行整合,这代表开发者可以在多个组件和文件中共享和重复使用样式规则。这对于创建自定义组件函数库特别有用,因为开发者可在整个应用程序中一致地应用和修改样式,同时保持程序代码的干净。

完全类型化的StyleX提供类型工具,让开发者以类型安全的方式来定义和使用样式。开发者可以精确控件可接受的属性和值,像是当定义一个组件样式时,开发者可以指定有效的CSS属性,以及这些属性可以接受的值。而这种机制将有助于减少错误,确保样式的一致性和可维护性,能够以更结构化和安全的方式管理大型和复杂应用程序的样式。

开源JavaScript编译器Babel是StyleX最重要的部分,Babel会寻找程序代码中定义的所有样式,并在编译时将其转换成为原子类别名称,同时也会把重复的部分删除,经过排序之后写入CSS文件中。StyleX支持各种静态模式,会通过使用本地常数和表达式定义样式。除了Babel之外,StyleX还包含小型执行时函数库,以及ESlint扩展组件。

StyleX的快速优势,主要源于编译的高效率以及执行时的高性能,Babel在转换时不会明显减慢构建速度,并且避免JavaScript在执行时插入样式的成本,StyleX只会在需要的时候,高效组合类别名称字符串。StyleX所生成的CSS也针对大小进行优化,即便是大型网站的样式,浏览器也可以快速解析。

Meta一再强调StyleX适用于大型且复杂的应用程序开发,StyleX通过生成精细的原子CSS类别名称,最小化CSS捆绑包的大小,而且随着应用程序中组件的数量增加,CSS组件的大小会逐渐趋于稳定,开发者不需手动优化或是延迟加载CSS文件。

此外,Babel扩展组件也能在编译阶段,利用原子构建和文件级缓存功能,处理大量组件中的样式。官方还提到,由于StyleX的目的在于封装样式,所以能够用于单独开发新文件,并且即便在其他组件重复使用,也能够以可预测的方式呈现。

Meta大量在旗下产品,包括脸书、WhatsApp、Instagram、Workplace和Threads中使用StyleX。目前,Meta在GitHub上开源的正式公司内部所使用的StyleX版本,StyleX开发工作主要在GitHub上进行,Meta会将新版本同步回内部使用。