最近的 UI 開發(fā)任務(wù)為重新審視 CSS-in-JS 和實用優(yōu)先 CSS (Tailwind) 提供了寶貴的機會。 我的日常角色很少涉及 UI 工作，因此這是一次令人耳目一新的體驗，儘管有些生疏。 我的目標(biāo)是對兩種方法進(jìn)行公正的比較，重點關(guān)注開發(fā)工作流程和工具。

Tailwind CSS

我們團(tuán)隊選擇 Tailwind 有點自發(fā)，是出於對效率的渴望。 雖然熟悉程度各不相同，並且存在一些懷疑，但節(jié)省的時間是一個令人信服的因素。

積極方面

集成、自定義變量創(chuàng)建和主題開發(fā)都非常簡單。 擴(kuò)展或構(gòu)建新主題被證明是直觀的：

<code>@import "tailwindcss";
@theme {  
  --font-script: Comic-sans; // theme extension
  --color-*: initial;  // default overrides
  --color-white: #fff;
  ...
}</code>

包含基本樣式，即使是像默認(rèn)邊距和填充刪除這樣簡單的樣式，也可以節(jié)省大量時間。 這大大簡化了工作流程。

Tailwind 的目標(biāo)是提供直觀的體驗，它在很大程度上實現(xiàn)了這一點。 然而，有些方面感覺不太直觀。類命名約定雖然總體上很明確（例如，p 表示 padding，mb 表示 margin-bottom），但偶爾會出現(xiàn)不一致的情況（例如，rounded 表示 border-radius）。 這可以通過自定義主題定義來緩解：

<code>@theme { 
  --border-radius: var(--rounded);
  --border-radius-none: var(--rounded-none);
  --border-radius-full: var(--rounded-full);
  // ...etc.
  --rounded*: initial;
}</code>

總體印象

可讀性和可維護(hù)性的問題比預(yù)期的要少。 雖然語法需要一段時間的調(diào)整，並且 VS Code 的 IntelliSense 偶爾會出現(xiàn)滯後，但即使將多個類應(yīng)用於小元素，代碼仍然易於管理且易於導(dǎo)航。

重要提示：避免過度依賴@apply。 這可能會導(dǎo)致“Tailwind-in-CSS”的不良結(jié)果。

服務(wù)器端渲染（SSR）

至關(guān)重要的是，Tailwind 在測試過程中沒有出現(xiàn) SSR 問題。 它的無縫集成是一個顯著的優(yōu)勢。

CSS-in-JS（情感）

2024-2025 年，CS??S-in-JS 解決方案的受歡迎程度正在下降，這主要是由於 React 等框架中服務(wù)器組件的興起。

參見：http://m.miracleart.cn/link/9cb4d40fce0492278209290ee3e4ae31

主要挑戰(zhàn)

主要問題源於對 React Context API 的依賴。 在 React 應(yīng)用程序中混合服務(wù)器和客戶端組件可能會導(dǎo)致數(shù)據(jù)丟失並阻止重新渲染時正確的樣式更新。 這個限制是許多 CSS-in-JS 庫所固有的。

雖然存在兼容的替代方案，但根本問題仍然存在。 Joshua Comeau 的博客提供了有關(guān)此問題的精彩背景。

回顧

事後看來，轉(zhuǎn)向 CSS-in-JS 的轉(zhuǎn)變感覺沒有最初預(yù)期的那麼有利。 雖然包含的開發(fā)體驗（一個文件中的所有內(nèi)容）最初很有吸引力，但隨著時間的推移，這一優(yōu)勢被證明不再那麼重要。

長期考慮

CSS-in-JS 導(dǎo)致打字和設(shè)定開銷增加。 與Tailwind相比，感覺效率較低。 雖然條件道具傳遞提供了強大的功能和靈活性：

<code>@import "tailwindcss";
@theme {  
  --font-script: Comic-sans; // theme extension
  --color-*: initial;  // default overrides
  --color-white: #fff;
  ...
}</code>

這也會使程式碼理解和重構(gòu)變得複雜。 過多的樣式覆蓋表示潛在的設(shè)計系統(tǒng)不一致：

<code>@theme { 
  --border-radius: var(--rounded);
  --border-radius-none: var(--rounded-none);
  --border-radius-full: var(--rounded-full);
  // ...etc.
  --rounded*: initial;
}</code>

對於新項目，我可能會避免 CSS-in-JS。

CSS 變數(shù)與主題

CSS 變數(shù)是無價的。 定義一次調(diào)色板並在組件之間重複使用它可以簡化樣式，提供與使用預(yù)定義組件變體類似的體驗。

<code>const Button = styled.button`
  background: ${props => props.variant === 'primary' ? "#ddd" : "#fff"};
`;

render(
  <div>
    <Button variant="primary">Primary</Button>
  </div>
);</code>

後處理器與設(shè)定

後處理器（例如 PostCSS）對於最佳化 CSS 至關(guān)重要。 它們具有顯著的優(yōu)點：

• cssnano：刪除未使用的程式碼。
• postcss-nested：啟用類似 Sass 的巢狀 CSS。
• stylelint：提供 linting 功能。
• autoprefixer：加上供應(yīng)商前綴（儘管現(xiàn)在不太重要）。
• postcss-import：啟用 @import 語句。

（完整清單：http://m.miracleart.cn/link/2d280461b029134123f1f1a356e176b1）

在增加開銷的同時，後處理器還可以改善開發(fā)人員體驗和 CSS 效能。 收益往往超過初始投資。

閃電CSS

Lightning CSS（基於 Rust 的 PostCSS 替代品）提供更快的建置時間和許多相同的功能。 如果您尋求一個整合良好的解決方案，那麼值得探索。

總結(jié)

CSS 格局正在迅速發(fā)展，新的工具和方法不斷湧現(xiàn)。 我使用 Tailwind 和 CSS-in-JS 的經(jīng)驗非常豐富，突顯了它們的優(yōu)點和缺點。 RSC 對未來 CSS 工具的影響是巨大的，值得進(jìn)一步考慮。

以上是關(guān)於CSS In-In-JS和公用事業(yè)優(yōu)先CSS（parwind）的想法的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！