简体繁体 English

条件类、CSS-in-JS、CSS 模块和实用程序优先 CSS 之间是否存在任何性能差异？

[英]Is there any performance difference between conditional classes, CSS-in-JS, CSS Modules and utility-first CSS?

原文 2022-04-02 03:14:10 9 1 javascript/ css/ frontend/ tailwind-css/ css-in-js

Is there any difference (specially performance-related) between dynamic/conditional classes (like JedWatson's classnames ) with SCSS, CSS Modules, CSS-in-JS (styled-components, JSS, Emotion, etc) and utility-first CSS (Tailwind)?动态/条件类（如JedWatson 的类名）与 SCSS、CSS 模块、CSS-in-JS（styled-components、JSS、Emotion 等）和实用程序优先 CSS（Tailwind）之间是否有任何区别（特别是与性能相关）？

I'm kick-starting a new React (probably with Next) project in a few weeks and I'm currently doing my researches to build the front-end tech stack.我将在几周内启动一个新的 React（可能与 Next）项目，目前我正在研究构建前端技术堆栈。 Any help and any opinion are appreciated!任何帮助和任何意见表示赞赏！

1 个解决方案

Performance is not something I'd focus on when choosing how to write CSS. Most of the time, you probably won't need to worry about the performance of your CSS, though there are a few exceptions:在选择如何编写 CSS 时，我不会关注性能。大多数时候，您可能不需要担心 CSS 的性能，但也有一些例外：

Animations: animations can slow things down considerable, especially on low-powered devices.动画：动画可以大大减慢速度，尤其是在低功率设备上。 However, the potential bottlenecks here are identical for all ways of writing CSS然而，这里潜在的瓶颈对于所有的写法都是一样的 CSS
CSS bundle size: the smaller, the better. CSS 捆绑大小：越小越好。 Though realistically this isn't too important until your shipping 20+ KB of CSS gzipped, and even then it only really affects the slowest inte.net connections.尽管实际上这并不是很重要，直到您将 CSS 的 20+ KB gzip 压缩，即使那样它也只会真正影响最慢的 inte.net 连接。 For large pages, almost nothing beats a utility approach like TailwindCSS.对于大页面，几乎没有什么比像 TailwindCSS 这样的实用方法更好的了。 For smaller pages/sites, everything's going to be small enough that it won't really matter.对于较小的页面/站点，一切都将足够小，以至于无关紧要。
Selector complexity.选择器的复杂性。 If selectors have the potential to match many elements (eg, the owl * + * ), then that can impact runtime performance as the DOM grows.如果选择器有可能匹配许多元素（例如，猫头鹰* + * ），那么随着 DOM 的增长，这会影响运行时性能。 This never happens with utility-first CSS, and probably doesn't happen with CSS Modules or CSS-in-JS.这永远不会发生在实用程序优先的 CSS 上，并且可能不会发生在 CSS 模块或 CSS-in-JS 上。

Instead of performance, I'd recommend looking at the developer experience for each of the CSS "frameworks" and how it relates to the rest of your tech-stack.除了性能，我建议查看每个 CSS“框架”的开发人员体验，以及它与您的技术堆栈的 rest 的关系。 99 / 100 times (citation needed), your performance bottleneck will not be your CSS. 99 / 100 次（需要引用），你的性能瓶颈不会是你的 CSS。