现代 CSS-in-JS 库的隐藏性能成本

本文包含大量来自 Aggelos Arvanitakis 的数据。但让我只关注他最后的建议

调查零运行时 CSS-in-JS 库是否适合您的项目。有时我们倾向于选择在 JS 中编写 CSS 以获得它提供的 DX（开发人员体验），而无需访问扩展的 JS API。如果您的应用程序不需要主题支持并且没有大量且复杂地使用 css prop，那么零运行时 CSS-in-JS 库可能是不错的选择。

“零运行时”意味着您以 CSS-in-JS 语法编写样式，但生成的是像任何其他 CSS 预处理器一样生成的 .css 文件。这将该工具转移到一个完全不同的类别。它只是一个开发人员工具，而不是网站用户需要为使用它付出代价的工具。

旗舰级的零运行时 CSS-in-JS 库是 Linaria。我认为语法看起来非常不错。

import { css } from 'linaria';
import fonts from './fonts';

const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
`;

<h1 className={header}>Hello world</h1>;

我也喜欢 CSS 模块 带来的仅为我做范围限定功能，这可以通过 零运行时样式 实现。

直接链接 →