保持 JavaScript 和 CSS 同步的做法？

Question

我正在开发一个大型的 JavaScript 密集型应用程序。一些 JavaScript 有一些相关的 CSS 规则。我们目前的做法是让每个 JavaScript 文件都有一个可选的相关 CSS 文件，如下所示：

MyComponent.js  // Adds CSS class "my-comp" to div
MyComponent.css // Defines .my-comp { color: green }

这样我就知道所有相关的 CSSMyComponent.js都将在MyComponent.css.

但问题是，我经常在这些文件中只有很少的 CSS。而且我经常觉得创建一个只包含几行 CSS 的整个文件太费力了——在 JavaScript 中对样式进行硬编码会更容易。但这将是通往黑暗面的道路......

最近我一直在考虑将 CSS 直接嵌入到 JavaScript 中——这样它仍然可以在构建过程中被提取出来并合并到一个大的 CSS 文件中。这样我就不必为每个小的 CSS 片段创建一个新文件。此外，当我移动/重命名/删除 JavaScript 文件时，我不必另外移动/重命名/删除 CSS 文件。

但是如何在 JavaScript 中嵌入 CSS 呢？在大多数其他语言中，我只会使用字符串，但 JavaScript 在多行字符串方面存在一些问题。恕我直言，以下看起来很丑陋：

Page.addCSS("\
  .my-comp > p {\
    font-weight: bold;\
    color: green;\
  }\
");

您还有哪些其他做法可以让您的 JavaScript 和 CSS 保持同步？

Answer 1

我对 CSS 文件的看法是它们描述了定义应用程序主题的规则。最佳实践通常指出，内容、表示和行为应保持独立，以便更改该主题相对容易。通过使用多个 CSS 文件，这会变得稍微困难​​一些，因为设计人员需要处理更多文件。

此外，CSS（级联样式表）规则受其在 CSS 文档中的位置的影响。通过拥有多个 CSS 文件，每个文件中具有不同的规则，确定优先规则的优先级可能会变得更加困难。

最后，如果您想找出 JS 文件中的 CSS 选择器与 CSS 文件相匹配，请尝试使用很酷的搜索工具，例如 grep（如果您使用的是 Linux）。如果你使用的是好的IDE，你还可以用它来快速搜索规则，然后直接跳转到行号即可。我确实认为将 CSS 规则保存在不同的文件中没有任何优势；这只会让事情变得复杂。

此外，我不建议将 CSS 内联。通过这样做，您将不可避免地使您的网页设计师更难以快速轻松地更换样式。外部 CSS 的全部意义在于，您的网页设计师可以更改主题或为不同的用户提供多个主题。如果将 CSS 嵌入到 JavaScript 或 HTML 中，那么您就将内容、行为和表示紧密耦合在一起。

最佳实践通常建议为此目的将内容、行为和表示分开。