The Differing Perspectives on CSS-in-JS

CSS-in-JS has mixed reviews. Some people strongly oppose this practice, believing that writing styles into JavaScript is wrong, and styles should be placed in CSS. This is a browser optimization solution and follows the principle of separation of concerns. Any other practice is ridiculous mistake and a sign of failure to learn from past mistakes (e.g.

但也有人热衷于 CSS-in-JS。他们认为将模板和功能放在一起（大多数 JavaScript 框架的做法）很成功，因此添加样式似乎很自然。Vue 的单文件组件就是一个典型例子。（如果您需要入门指南，请观看我和 Dustin Schau 制作的关于 CSS-in-JS 的视频。）

Brent Jackson 认为应该学习 CSS-in-JS，但也提出了一些务实的观点：

CSS-in-JS 能做什么？

• 使用 JavaScript 语法编写 CSS
• 将样式与组件放在一起
• 利用原生 JS 语法特性
• 利用 JS 生态系统中的任何内容

CSS-in-JS 不能免除你理解：

• 样式如何应用于 DOM
• 继承如何工作
• CSS 属性如何工作
• CSS 布局如何工作

CSS-in-JS 并不能免除你学习 CSS，至少大部分情况下是这样。

我听到很多关于 CSS-in-JS 的反对意见，例如“你们使用 CSS-in-JS 是因为你们不懂 CSS”或“你们这样做是因为你们害怕级联。我已经知道如何作用域 CSS 了”。我认为这些说法并不特别有帮助。

Laura Buns 有一篇精彩的两面性文章，标题为“没有网络的网络”，其中一部分是关于 React 和 CSS-in-JS 的：

我讨厌 React，因为它默认的 CSS-in-JS 方法鼓励你编写完全自包含的一次性组件，而不是尝试将网站 UI 作为一个整体构建。

你不需要因为使用 React 就必须使用 CSS-in-JS，但它很流行，这是一个非常有趣且合理的批评。如果你将所有内容都作用域化，是不是会增加不一致的风险？

到目前为止，我一直是 CSS 模块的粉丝，因为它在 CSS-in-JS 中尽可能轻量级，只处理作用域和位置，仅此而已。我将它与 Sass 一起使用，以便我们可以访问有助于保持一致性的 mixin 和变量，但我可以看出它如何导致过多的单一组件的危险境地。

然而，它们将是一次性的组件。可代码分割的一次性组件。一切都是平衡的。

Laura 接着说，她喜欢 CSS-in-JS 方法提供的一些强大功能和灵活性：

我喜欢 CSS-in-JS 提供足够的抽象，让我仍然可以使用盲目猫头鹰选择器之类的技巧，同时也让我可以使用 JS 来做容器查询之类的事情。

Martin Hofmann 创建了一个网站，比较了 BEM 与 Emotion，查看了一个小的“警报”组件。我喜欢它是一个没有感情色彩的（字面意思，不是指库）比较，它关注语法。BEM 有一些优点，特别是它不需要工具，并且可以轻松地共享到任何 Web 项目中。但 Emotion 方法在许多方面更简洁，看起来更容易处理。

我希望看到更多对这些技术的客观比较。选择 A 在这三方面做得很好，但在这些方面很痛苦，而选择 B 在其他方面做得很好，并解决了其他一些痛点。

我们最近链接了 Scott Jehl 的文章，该文章探讨了异步加载 CSS。Scott 的开篇白：

为提高页面性能和弹性，我们可以做的最重要的事情之一是以不延迟页面渲染的方式加载 CSS。

值得注意的是，全面的 CSS-in-JS 方法可以自然地获得这种能力，因为样式被捆绑到 JavaScript 中。这是有代价的。性能的代价。但是，如果我们消除了其他阻塞渲染的内容，我们就能收回部分成本。这很有趣，至少值得更多的数据。

我可能会为此挨骂，但我对试图将 CSS-in-JS 归咎于提高行业入门门槛的讨论不太感兴趣。这是一个需要认真考虑的大问题，但我们这里讨论的不是关闭 CSS 并强迫每个人使用其他语言。我们讨论的是针对特定类型项目和特定规模的利基库。

我认为，如果……值得考虑一下 CSS-in-JS 的理念：

• 你无论如何都在做一个组件繁重的 JavaScript 项目。
• 你已经将模板、功能和数据查询放在一起了。
• 你认为你可以利用它而不损害用户体验，例如在其他地方获得速度提升。
• 你的团队对所需的科技很熟悉，也就是说，你不会排斥人才。

Max Stoiber 是一个不折不扣的粉丝。他在这个主题上的文章谈到了这种风格给他带来的信心以及他节省的时间，这两点我发现都是真的。但他还认为这种方法专门用于 JavaScript 框架应用程序。

如果你正在使用 JavaScript 框架来构建一个带有组件的 Web 应用程序，CSS-in-JS 可能是一个不错的选择。特别是如果你是一个团队的一部分，团队中的每个人都理解基本的 JavaScript。

我很想在评论中听到你们的看法。你对这一切有什么看法？疯狂地爱着？充满厌恶？我最感兴趣的是听到真实项目中的成功案例或失败案例。

The above is the detailed content of The Differing Perspectives on CSS-in-JS. For more information, please follow other related articles on the PHP Chinese website!