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

Tailwind CSS

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

積極方面

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

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

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

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

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

總體印象

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

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

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

至關(guān)重要的是，Tailwind 在測(cè)試過(guò)程中沒(méi)有出現(xiàn) SSR 問(wèn)題。 它的無(wú)縫集成是一個(gè)顯著的優(yōu)勢(shì)。

CSS-in-JS（情感）

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

參見(jiàn)：http://www.miracleart.cn/link/9cb4d40fce0492278209290ee3e4ae31

主要挑戰(zhàn)

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

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

回顧

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

長(zhǎng)期考慮

CSS-in-JS 導(dǎo)致打字和配置開(kāi)銷增加。 與Tailwind相比，感覺(jué)效率較低。 雖然條件道具傳遞提供了強(qiáng)大的功能和靈活性：

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

這也會(huì)使代碼理解和重構(gòu)變得復(fù)雜。 過(guò)多的樣式覆蓋表明潛在的設(shè)計(jì)系統(tǒng)不一致：

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

對(duì)于新項(xiàng)目，我可能會(huì)避免 CSS-in-JS。

CSS 變量和主題

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

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

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

后處理器和配置

后處理器（例如 PostCSS）對(duì)于優(yōu)化 CSS 至關(guān)重要。 它們具有顯著的優(yōu)點(diǎn)：

• cssnano：刪除未使用的代碼。
• postcss-nested：?jiǎn)⒂妙愃朴?Sass 的嵌套 CSS。
• stylelint：提供 linting 功能。
• autoprefixer：添加供應(yīng)商前綴（盡管現(xiàn)在不太重要）。
• postcss-import：?jiǎn)⒂?@import 語(yǔ)句。

（完整列表：http://www.miracleart.cn/link/2d280461b029134123f1f1a356e176b1）

在增加開(kāi)銷的同時(shí)，后處理器還可以改善開(kāi)發(fā)人員體驗(yàn)和 CSS 性能。 收益往往超過(guò)初始投資。

閃電CSS

Lightning CSS（基于 Rust 的 PostCSS 替代品）提供更快的構(gòu)建時(shí)間和許多相同的功能。 如果您尋求一個(gè)集成良好的解決方案，那么值得探索。

總結(jié)

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

以上是關(guān)于 CSS-in-JS 和實(shí)用優(yōu)先 CSS (Tailwind) 的思考的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！