Meta開源旗下臉書、Instagram等產(chǎn)品都在使用的網(wǎng)頁接口樣式系統(tǒng)StyleX

Meta開源自家產(chǎn)品所使用的網(wǎng)頁接口樣式系統(tǒng)StyleX，其結合了CSS-in-JS函數(shù)庫的開發(fā)體驗，和靜態(tài)CSS的性能和可擴展性。官方指出，StyleX經(jīng)過精心設計，并解決之前團隊無法封裝和擴展樣式組件的問題。

StyleX支持CSS的表達性子集，避免使用復雜的選擇器，確保生成的CSS不會出現(xiàn)特定沖突。StyleX并不全面支持CSS的功能（Feature），而是專注于對大型應用程序和組件函數(shù)庫中最有用，被認為具有表達力，且易于管理和維護的功能。

而且StyleX將樣式轉換與組織成為原子CSS類別名稱，用戶不需要學習或是管理實用類別名稱函數(shù)庫。也就是說，StyleX的樣式經(jīng)過優(yōu)化，拆分成更小、更具體的部分，每一個原子類別對應一個具體的樣式規(guī)則，像是一個類別僅代表邊距大小或是字體顏色，通過減少重復的CSS程序代碼，使樣式更加一致可預測。

在傳統(tǒng)的CSS框架中，開發(fā)者會需要學習和使用大量的實用類別，雖然這些類別替常見樣式提供方便的使用方法，但StyleX自動將樣式轉換成為更精細的類別，僅需要專注于樣式的實際應用，不需要開發(fā)者額外學習和管理這些類別。

此外，StyleX允許樣式在文件和組件邊界間進行整合，這代表開發(fā)者可以在多個組件和文件中共享和重復使用樣式規(guī)則。這對于創(chuàng)建自定義組件函數(shù)庫特別有用，因為開發(fā)者可在整個應用程序中一致地應用和修改樣式，同時保持程序代碼的干凈。

完全類型化的StyleX提供類型工具，讓開發(fā)者以類型安全的方式來定義和使用樣式。開發(fā)者可以精確控件可接受的屬性和值，像是當定義一個組件樣式時，開發(fā)者可以指定有效的CSS屬性，以及這些屬性可以接受的值。而這種機制將有助于減少錯誤，確保樣式的一致性和可維護性，能夠以更結構化和安全的方式管理大型和復雜應用程序的樣式。

開源JavaScript編譯器Babel是StyleX最重要的部分，Babel會尋找程序代碼中定義的所有樣式，并在編譯時將其轉換成為原子類別名稱，同時也會把重復的部分刪除，經(jīng)過排序之后寫入CSS文件中。StyleX支持各種靜態(tài)模式，會通過使用本地常數(shù)和表達式定義樣式。除了Babel之外，StyleX還包含小型執(zhí)行時函數(shù)庫，以及ESlint擴展組件。

StyleX的快速優(yōu)勢，主要源于編譯的高效率以及執(zhí)行時的高性能，Babel在轉換時不會明顯減慢構建速度，并且避免JavaScript在執(zhí)行時插入樣式的成本，StyleX只會在需要的時候，高效組合類別名稱字符串。StyleX所生成的CSS也針對大小進行優(yōu)化，即便是大型網(wǎng)站的樣式，瀏覽器也可以快速解析。

Meta一再強調(diào)StyleX適用于大型且復雜的應用程序開發(fā)，StyleX通過生成精細的原子CSS類別名稱，最小化CSS捆綁包的大小，而且隨著應用程序中組件的數(shù)量增加，CSS組件的大小會逐漸趨于穩(wěn)定，開發(fā)者不需手動優(yōu)化或是延遲加載CSS文件。

此外，Babel擴展組件也能在編譯階段，利用原子構建和文件級緩存功能，處理大量組件中的樣式。官方還提到，由于StyleX的目的在于封裝樣式，所以能夠用于單獨開發(fā)新文件，并且即便在其他組件重復使用，也能夠以可預測的方式呈現(xiàn)。

Meta大量在旗下產(chǎn)品，包括臉書、WhatsApp、Instagram、Workplace和Threads中使用StyleX。目前，Meta在GitHub上開源的正式公司內(nèi)部所使用的StyleX版本，StyleX開發(fā)工作主要在GitHub上進行，Meta會將新版本同步回內(nèi)部使用。