Question

我正在开发一个庞大的JavaScript应用程序。几个JavaScript有一些相关的CSS规则。我们目前的做法是为每个JavaScript文件提供一个可选的相关CSS文件，如下所示：

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

这样我知道与MyComponent.js相关的所有CSS都在MyComponent.css。

但事实是，我经常在这些文件中只有很少的CSS。而且我常常觉得创建一个完整的文件只需要包含几行CSS就太费劲了 - 只需在JavaScript中硬编码样式就更容易了。但这将成为黑暗面的道路......

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

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

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

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

Answer 1

我对CSS文件的看法是，它们描述了定义应用程序主题的规则。最佳实践通常声明内容，表示和行为应该分开，以便更改该主题相对容易。通过拥有多个CSS文件，这会变得更加困难，因为设计人员可以处理更多文件。

此外，CSS（Cascading StyleSheets）规则受其在CSS文档中的位置的影响。通过在每个文件中使用具有不同规则的多个CSS文件，可能更难以确定哪个规则优先。

最后，如果你想知道你的JS文件中的哪个CSS选择器与CSS文件匹配，请尝试使用酷搜索工具，如grep，如果你在linux上。如果您使用的是良好的IDE，您也可以使用它来快速搜索规则，然后您可以跳转到行号。我认为将CSS规则保存在不同的文件中没有任何好处;这只会使问题复杂化。

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

最佳做法通常建议将内容，行为和演示文稿分开以实现此目的。

Answer 2

每个JS文件都有一个CSS文件对我来说似乎是件好事。它干净，易于理解和维护。唯一的问题是在每个页面上都有几十个CSS文件，但我想你将这些文件合并到一个大文件中，所以在你的情况下不存在这个问题。

如何在JavaScript中嵌入CSS？这取决于您拥有的环境以及构建过程的完成方式。最简单的方法是在每个JavaScript文件的开头都有一个大的注释，如下所示：

// <...>Your copyright notice here</...>

// <css>
/*
body{color:red;}
div{border:solid 10px lime;}
// ... other ugly styles.
*/
// </css>

然后在构建期间，您必须搜索<css>...</css>块并通过修剪/*和*/来提取CSS。

当然，它会产生一个问题：如果您使用的是自动完成的IDE，那么将CSS嵌入到JavaScript文件中将使得在这种情况下无法使用自动完成。

Answer 3

我首选的方法是将所有CSS文件分开，然后建立一个构建过程，在部署时将它们编译成更大的CSS文件。

我会避免将你的JS与你的CSS合并。从文件级别来看，它可能听起来更清晰，我认为它会变得很乱。那，你将失去编辑给你的突出显示和语法帮助。

Answer 4

结帐Csster。我写它来解决这个问题。

您使用Javascript对象文字语法直接在您的Javascript中嵌入CSS规则。它不比原始CSS更丑陋。

Csster.style({
  h1: {
    fontSize: 18,
    color: 'red'
  }
});

规则被插入到客户端的DOM中。此体系结构简化了构建过程并减少了客户端请求。

你可以像你描述的那样使用它，但Csster还提供了其他一些细节：

经过充分测试，我在很多项目中都使用过它。它独立于jQuery，但可以很好地使用它。

我希望有更多人使用它并提供反馈。