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

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

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

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

在傳統(tǒng)的CSS框架中，開(kāi)發(fā)者會(huì)需要學(xué)習(xí)和使用大量的實(shí)用類別，雖然這些類別替常見(jiàn)樣式提供方便的使用方法，但StyleX自動(dòng)將樣式轉(zhuǎn)換成為更精細(xì)的類別，僅需要專注于樣式的實(shí)際應(yīng)用，不需要開(kāi)發(fā)者額外學(xué)習(xí)和管理這些類別。

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

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

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

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

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

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

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