Meta(原 Facebook)開源了全新的 CSS-in-JS 庫 StyleX。
官方介紹道,StyleX 是一個富有表現力、具有確定性、可靠且可擴展的樣式系統。它通過使用編譯時 (compile-time) 工具融合了靜態 CSS 的性能和可擴展性。 此外,StyleX 不僅僅是一個基于編譯器的 CSS-in-JS 庫,它經過精心設計,可以滿足大型應用程序、可復用組件庫和靜態類型代碼庫的要求。Meta 旗下多款產品如 Facebook、WhatsApp、Instagram、Workplace、Threads 等都在使用 StyleX 作為其 CSS 樣式解決方案。 StyleX 主要特性
快速:StyleX 在編譯時和運行時都具備高效的性能。Babel 轉換不會對構建過程產生顯著影響。在運行時,StyleX 避免了使用 JavaScript 插入樣式的開銷,并僅在必要時高效地組合類名字符串。生成的 CSS 經過優化,確保即使是大型網站的樣式也能被瀏覽器快速解析。
可擴展:StyleX 旨在適應像 Meta 這樣的超大型代碼庫。通過原子構建和文件級緩存,Babel 插件能夠處理數萬個組件在編譯時的樣式處理。由于 StyleX 設計為封裝樣式,它允許在隔離環境中開發新組件,并期望一旦在其他組件中使用時能夠可預測地呈現。
可預測性:StyleX 會自動管理 CSS 選擇器的特異性,以確保生成的規則之間不會發生沖突。它為開發人員提供了一個可靠地應用樣式的系統,并確保 “最后應用的樣式始終生效”。
類型安全:使用 TypeScript 或 Flow 類型來約束組件接受的樣式,每個樣式屬性和變量都具有完全的類型定義。這有助于提高代碼的可讀性和可維護性,同時減少潛在的錯誤和沖突。
樣式去重:StyleX 鼓勵在同一文件中編寫樣式和組件。這種方法有助于使樣式在長期內更具可讀性和可維護性。StyleX 能夠利用靜態分析和構建時工具來跨組件去重樣式,并刪除未使用的樣式。
可測試性:StyleX 可以配置為輸出調試類名,而不是功能性的原子類名。這可以用于生成快照,以便在對設計進行輕微更改時不會經常變化。通過這種方式,開發人員可以更輕松地測試和驗證樣式的正確性,從而提高開發效率和產品質量。
示例代碼
import stylex from '@stylexjs/stylex'; const styles = stylex.create({ root: { padding: 10, }, element: { backgroundColor: 'red', }, }); const styleProps = stylex.apply(styles.root, styles.element);
下面是一個按鈕組件的示例代碼
import * as stylex from "@stylexjs/stylex"; const styles = stylex.create({ base: { appearance: "none", borderWidth: 0, borderStyle: "none", backgroundColor: "blue", color: "white", borderRadius: 4, paddingBlock: 4, paddingInline: 8, }, }); export default function Button({ onClick, children, }: Readonly<{ onClick: () => void; children: React.ReactNode; }>) { return ( ); }
審核編輯:劉清
-
javascript
+關注
關注
0文章
525瀏覽量
53942 -
CSS
+關注
關注
0文章
110瀏覽量
14423 -
選擇器
+關注
關注
0文章
109瀏覽量
14588 -
靜態分析
+關注
關注
1文章
41瀏覽量
3903
原文標題:Facebook開源StyleX , 在JavaScript中寫CSS
文章出處:【微信號:OSC開源社區,微信公眾號:OSC開源社區】歡迎添加關注!文章轉載請注明出處。
發布評論請先 登錄
相關推薦
SciChart—高性能的JavaScript圖表和圖形庫
![SciChart—高性能的<b class='flag-5'>JavaScript</b>圖表和圖形庫](https://file1.elecfans.com/web3/M00/06/DF/wKgZO2eQVWqAbaRXAABHCUF3RLw843.png)
Spire.XLS for JavaScript——多功能JavaScript電子表格庫(一)
![Spire.XLS for <b class='flag-5'>JavaScript</b>——多功能<b class='flag-5'>JavaScript</b>電子表格庫(一)](https://file1.elecfans.com/web3/M00/06/B0/wKgZPGeO-OCAWK0sAAA4bPE0HPA575.png)
javascript:void(0) 是否影響SEO優化
javascript:void(0) 的作用是什么
開源能帶我們走向何方
Tailwind CSS v4.0發布首個Beta版本
![Tailwind <b class='flag-5'>CSS</b> v4.0發布首個Beta版本](https://file1.elecfans.com/web1/M00/F5/C7/wKgaoWdD2vqAIMQkAAAYNKTt-Cs869.png)
研發都應該了解的如何在vite中接入現代化css工程化方案
bootstrap框架介紹
芯海應用筆記:CSS34P16P(A)型應用說明文檔
Arm新Arm Neoverse計算子系統(CSS):Arm Neoverse CSS V3和Arm Neoverse CSS N3
![Arm新Arm Neoverse計算子系統(<b class='flag-5'>CSS</b>):Arm Neoverse <b class='flag-5'>CSS</b> V3和Arm Neoverse <b class='flag-5'>CSS</b> N3](https://file1.elecfans.com//web2/M00/D8/B8/wKgaomYo1pyAWmiUAAC0n-JZNkM304.jpg)
評論