关于 CSS-in-JS 和实用优先 CSS (Tailwind) 的思考-js教程-PHP中文网

Thoughts on CSS-in-JS and Utility-First CSS (Tailwind)

最近的 UI 开发任务为重新审视 CSS-in-JS 和实用优先 CSS (Tailwind) 提供了宝贵的机会。我的日常角色很少涉及 UI 工作，因此这是一次令人耳目一新的体验，尽管有些生疏。我的目标是对两种方法进行公正的比较，重点关注开发工作流程和工具。

Tailwind CSS

我们团队选择 Tailwind 有点自发，是出于对效率的渴望。虽然熟悉程度各不相同，并且存在一些怀疑，但节省的时间是一个令人信服的因素。

积极方面

集成、自定义变量创建和主题开发都非常简单。扩展或构建新主题被证明是直观的：

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

登录后复制

包含基本样式，即使是像默认边距和填充删除这样简单的样式，也可以节省大量时间。这大大简化了工作流程。

Tailwind 的目标是提供直观的体验，它在很大程度上实现了这一点。然而，有些方面感觉不太直观。类命名约定虽然总体上很明确（例如，p 表示 padding，mb 表示 margin-bottom），但偶尔会出现不一致的情况（例如，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>

登录后复制

总体印象

可读性和可维护性的问题比预期的要少。虽然语法需要一段时间的调整，并且 VS Code 的 IntelliSense 偶尔会出现滞后，但即使将多个类应用于小元素，代码仍然易于管理且易于导航。

重要提示：避免过度依赖@apply。这可能会导致“Tailwind-in-CSS”的不良结果。

服务器端渲染（SSR）

至关重要的是，Tailwind 在测试过程中没有出现 SSR 问题。它的无缝集成是一个显着的优势。

CSS-in-JS（情感）

2024-2025 年，CSS-in-JS 解决方案的受欢迎程度正在下降，这主要是由于 React 等框架中服务器组件的兴起。

参见：https://www.php.cn/link/9cb4d40fce0492278209290ee3e4ae31

主要挑战

主要问题源于对 React Context API 的依赖。在 React 应用程序中混合服务器和客户端组件可能会导致数据丢失并阻止重新渲染时正确的样式更新。这个限制是许多 CSS-in-JS 库所固有的。

虽然存在兼容的替代方案，但根本问题仍然存在。 Joshua Comeau 的博客提供了有关此问题的精彩背景。

回顾

事后看来，向 CSS-in-JS 的转变感觉没有最初预期的那么有利。虽然包含的开发体验（一个文件中的所有内容）最初很有吸引力，但随着时间的推移，这一优势被证明不再那么重要。

长期考虑

CSS-in-JS 导致打字和配置开销增加。与Tailwind相比，感觉效率较低。虽然条件道具传递提供了强大的功能和灵活性：

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

登录后复制

这也会使代码理解和重构变得复杂。过多的样式覆盖表明潜在的设计系统不一致：

<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 变量和主题

CSS 变量是无价的。定义一次调色板并在组件之间重用它可以简化样式，提供与使用预定义组件变体类似的体验。

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

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

登录后复制