将JavaScript和CSS保持同步的实践？

题

我正在制作一个大型JavaScript繁重的应用程序。几个JavaScript有一些相关的CSS规则。我们当前的练习是每个JavaScript文件具有可选的 相关的CSS文件, ，像这样：

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

这样我就知道所有CSS都与 MyComponent.js 会进来 MyComponent.css.

但是事实是，我在这些文件中经常几乎没有CSS。而且，我经常觉得创建一个整个文件以至于只包含几行CSS是太多的精力 - 只需将JavaScript内部的样式进行硬编码即可。但这将是通往黑暗面的道路...

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

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

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

你还有什么其他实践 为了使您的JavaScript和CSS保持同步吗？

没有正确的解决方案

其他提示

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

此外，CSS（级联样式表）规则受其在CSS文档中的位置的影响。通过在每个规则中具有多个具有不同规则的CSS文件，因此优先考虑哪些规则优先考虑变得更加困难。

最后，如果您想找出JS文件中的CSS选择器与CSS文件匹配的内容，请尝试使用Cool搜索工具（例如GREP），如果您在Linux上。如果您使用的是良好的IDE，也可以使用它快速搜索规则，那么您可以跳到行号。我真的认为将CSS规则保存在不同的文件中没有任何优势。这只会使事情复杂化。

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

最佳实践通常建议将内容，行为和演示保留为此目的。

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

如何将CSS嵌入JavaScript中？这取决于您拥有的环境以及如何完成构建过程。最简单的事情是在每个JavaScript文件的开头发表大量评论，类似的内容：

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

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

然后在构建过程中，您必须搜索 <css>...</css> 通过修剪来阻止并提取CSS /* 和 */.

当然，它会产生一个问题：如果您使用的是与自动完成的IDE，则将CSS嵌入JavaScript文件将使在这种情况下不可能使用自动完成。

我首选的方法是将所有CSS文件分开，然后进行构建过程，将其编译为部署时较大的CSS文件。

我会避免将您的JS与您的CSS合并。听起来可能是文件级别的更干净的解决方案，我认为它会很快变得凌乱。那，您将失去编辑给您的突出显示和语法帮助。

查看 csster. 。我写了它是为了解决这个问题。

您使用JavaScript对象文字语法将CSS规则直接嵌入JavaScript中。这不比RAW CSS丑。

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

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

您可以像描述的那样使用它，但是 csster 还提供了其他几个美味：

经过了经过良好的测试，我在许多项目上使用了它。它独立于jQuery，但可以很好地发挥作用。

我很想让更多的人使用它并提供反馈。

许可以下： CC-BY-SA 和归因