Facebook開(kāi)源StyleX如何在JavaScript中寫(xiě)CSS呢？

Meta（原 Facebook）開(kāi)源了全新的 CSS-in-JS 庫(kù) StyleX。

官方介紹道，StyleX 是一個(gè)富有表現(xiàn)力、具有確定性、可靠且可擴(kuò)展的樣式系統(tǒng)。它通過(guò)使用編譯時(shí) (compile-time) 工具融合了靜態(tài) CSS 的性能和可擴(kuò)展性。 此外，StyleX 不僅僅是一個(gè)基于編譯器的 CSS-in-JS 庫(kù)，它經(jīng)過(guò)精心設(shè)計(jì)，可以滿足大型應(yīng)用程序、可復(fù)用組件庫(kù)和靜態(tài)類型代碼庫(kù)的要求。Meta 旗下多款產(chǎn)品如 Facebook、WhatsApp、Instagram、Workplace、Threads 等都在使用 StyleX 作為其 CSS 樣式解決方案。 StyleX 主要特性

快速：StyleX 在編譯時(shí)和運(yùn)行時(shí)都具備高效的性能。Babel 轉(zhuǎn)換不會(huì)對(duì)構(gòu)建過(guò)程產(chǎn)生顯著影響。在運(yùn)行時(shí)，StyleX 避免了使用 JavaScript 插入樣式的開(kāi)銷，并僅在必要時(shí)高效地組合類名字符串。生成的 CSS 經(jīng)過(guò)優(yōu)化，確保即使是大型網(wǎng)站的樣式也能被瀏覽器快速解析。

可擴(kuò)展：StyleX 旨在適應(yīng)像 Meta 這樣的超大型代碼庫(kù)。通過(guò)原子構(gòu)建和文件級(jí)緩存，Babel 插件能夠處理數(shù)萬(wàn)個(gè)組件在編譯時(shí)的樣式處理。由于 StyleX 設(shè)計(jì)為封裝樣式，它允許在隔離環(huán)境中開(kāi)發(fā)新組件，并期望一旦在其他組件中使用時(shí)能夠可預(yù)測(cè)地呈現(xiàn)。

可預(yù)測(cè)性：StyleX 會(huì)自動(dòng)管理 CSS 選擇器的特異性，以確保生成的規(guī)則之間不會(huì)發(fā)生沖突。它為開(kāi)發(fā)人員提供了一個(gè)可靠地應(yīng)用樣式的系統(tǒng)，并確保 “最后應(yīng)用的樣式始終生效”。

類型安全：使用 TypeScript 或 Flow 類型來(lái)約束組件接受的樣式，每個(gè)樣式屬性和變量都具有完全的類型定義。這有助于提高代碼的可讀性和可維護(hù)性，同時(shí)減少潛在的錯(cuò)誤和沖突。

樣式去重：StyleX 鼓勵(lì)在同一文件中編寫(xiě)樣式和組件。這種方法有助于使樣式在長(zhǎng)期內(nèi)更具可讀性和可維護(hù)性。StyleX 能夠利用靜態(tài)分析和構(gòu)建時(shí)工具來(lái)跨組件去重樣式，并刪除未使用的樣式。

可測(cè)試性：StyleX 可以配置為輸出調(diào)試類名，而不是功能性的原子類名。這可以用于生成快照，以便在對(duì)設(shè)計(jì)進(jìn)行輕微更改時(shí)不會(huì)經(jīng)常變化。通過(guò)這種方式，開(kāi)發(fā)人員可以更輕松地測(cè)試和驗(yàn)證樣式的正確性，從而提高開(kāi)發(fā)效率和產(chǎn)品質(zhì)量。

示例代碼

import stylex from '@stylexjs/stylex';

const styles = stylex.create({
  root: {
    padding: 10,
  },
  element: {
    backgroundColor: 'red',
  },
});

const styleProps = stylex.apply(styles.root, styles.element);

下面是一個(gè)按鈕組件的示例代碼

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 (
    
      {children}
    
  );
}

審核編輯：劉清