那么，“HTML-CSS-JS”和“CSS-in-JS”到底是什么？

昨天下午，我认识的一位早期开发者给我发私信问我：“大家到底是怎么定义 CSS-in-JS 的？” 他们看到网上有很多这样的争论，但不知道该如何参与讨论，因为没人费心去定义这些术语。当我思考该如何回答他们时，我意识到……“CSS-in-JS”是一个包罗万象的术语！市面上有很多不同的“CSS-in-JS”技术，其中一些比其他的更接近“传统的”HTML-CSS-JS 方法！

HTML-CSS-JS 与 JS-JS-JS 之争的很大一部分根源在于历史背景和个人感受，而非精确的技术细节。我认为试图将其变成一场纯粹的技术讨论并非明智之举，因为讨论中还涉及许多其他社会动态。但我也认为，如果我们能够费心定义这些术语，讨论的技术层面将会更加健康。本着这种精神，我想谈谈我观察到的一些具体的前端策略。

TL;DR

通过分解这些策略，我能得出 CSS-in-JS 的最佳工作定义：

任何使用 JavaScript普遍应用样式的技术，而不是根据用户行为应用样式。

“单独文件” CSS。

一般不考虑 CSS-in-JS

CSS 是在.css（或.scss，或.less）文件中开发的，这些文件与文件分开维护.js。在开发过程中，它们通常保存在单独的stylesheets目录中。这些 CSS 文件可能会由几个小文件预处理成一个更大的 CSS 包，也可能不会。如果 CSS 使用面向组件的技术，开发人员会使用 BEM 或其他命名约定来确保组件级样式保持组件级。

Web 组件和 Shadow DOM

一般不考虑 CSS-in-JS

由于这项技术尚不成熟，目前尚无关于 CSS 保存位置的严格约定！不过，这种样式使用了 Shadow DOM 样式隔离，以确保组件级样式始终保持在组件级别。

具有非正式作用域的组件级 CSS

一般不考虑 CSS-in-JS

CSS 通常用.css/. scss/文件开发.less，这些文件与其他组件文件（例如 HTML、JS、JSX）位于同一目录中。此策略也适用于未在块中使用该属性.vue的文件。这些样式会被预处理成更大的文件以便交付，但不会添加任何数据属性或“roboclasses”来强制组件作用域。相反，开发人员必须使用 BEM 或其他命名约定来确保组件级样式保持组件级。scopedstyle

JS 应用的实用程序类

有时考虑 CSS-in-JS

像 Tailwind 或 Tachyons 这样的工具类框架在单独的文件中维护。所有组件都由 JS 渲染，并使用该 JS 来决定将哪些工具类应用于组件内的 HTML 元素。

具有 JS 强制作用域的组件级 CSS

有时考虑 CSS-in-JS

在这种前端策略中，CSS 与组件文件一起用于样式设置，或者嵌入到这些组件文件中.vue。在处理过程中，会使用 Vuescoped属性或类似 React 的插件，styled-components为组件样式添加“roboclass”前缀，用于限定作用域。此“roboclass”会在组件的客户端或服务器渲染期间应用，因此此策略要求使用 JavaScript 进行模板渲染。

JS 应用的内联样式

几乎总是考虑 CSS-in-JS

所有组件均由 JS 渲染，并使用该 JS 来决定将哪些特定的内联样式应用于组件内的 HTML 元素。“CSS 模块”就属于此类。

在为期一个月的旅行开始前，我匆匆写下了这篇文章。我的清单并非详尽无遗，解释也未必清晰，我希望在一篇更完善的文章中能够体现出来。如果大家能帮我补充一些我遗漏或略过的内容，我将不胜感激，这样这篇帖子/讨论就能成为那些对 CSS-in-JS 讨论感到困惑的朋友们的宝贵资源。

如果大家在讨论中不发表对这些技术的看法，我将不胜感激。我打算写一篇后续文章，谈谈我所认为的这些技术的优缺点。欢迎大家在评论区发表意见！但在这里，我只想给出一些定义，以便最大限度地发挥这篇文章/讨论的资源作用。