保持 JavaScript 和 CSS 同步的做法？答案

【问题标题】：Practices for keeping JavaScript and CSS in sync?保持 JavaScript 和 CSS 同步的做法？
【发布时间】：2011-01-08 21:45:19
【问题描述】：

我正在开发一个使用大量 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 直接嵌入到 JavaScript 中 - 这样它仍然可以在构建过程中提取并合并到一个大的 CSS 文件中。这样我就不必为每个小的 CSS 片段创建一个新文件。此外，当我移动/重命名/删除 JavaScript 文件时，我不必另外移动/重命名/删除 CSS 文件。

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

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

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

【问题讨论】：

标签： javascript css synchronization project-layout

【解决方案1】：

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

此外，CSS（层叠样式表）规则受其在 CSS 文档中的位置影响。通过在每个 CSS 文件中包含具有不同规则的多个 CSS 文件，可能会更难以确定哪些规则优先。

最后，如果您想找出您的 JS 文件中的哪个 CSS 选择器与哪个 CSS 文件匹配，请尝试使用一个很酷的搜索工具，例如 grep，如果您使用的是 linux。如果你用的是好的IDE，也可以用它来快速搜索规则，然后直接跳转到行号即可。我真的认为将 CSS 规则保存在不同的文件中没有任何好处；它只会使事情复杂化。

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

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

【讨论】：

你在主题上的观点是一个有效的，我没有太多考虑。虽然我们目前没有主题，但我不会在未来排除它 - 至少在配色方案方面。但我仍然会考虑我们的大部分 CSS 结构，而不是真正的主题主题。但正如我所说 - 你提出了一个有效的观点。
至于 CSS 的级联特性——我尽量主要依赖于选择器的特殊性，而不是它们的顺序。
但我绝对不会将所有的 CSS 放回一个或几个文件中。我们一开始就这样做了，这是一场维护噩梦。
@Rene - 你能描述一下是什么让它如此难以维护吗？根据我的经验，情况正好相反。我不得不重新为我们的一个应用程序和它的工具重新设置主题，因为我必须检查几个文件。在很多情况下，规则是重复的，所以工作比较忙，因为我一遍又一遍地进行类似的修改。 Tt 感觉更像是忙碌的工作，而不是应用工程。在这种情况下，如果我不不断地反复更换相同的颜色，就可以节省时间。我很想听听您在较少文件中使用 CSS 的经验。
我认为这是应用程序的 JavaScript 和 CSS 端之间的权衡。对于主题，您希望所有 CSS 尽可能与 JavaScript 分离。为了维护 JavaScript，您希望 CSS 尽可能接近引用它的 JavaScript 代码。在我们的案例中，我认为 JavaScript 方面更重要——我们真的很重 JavaScript，而且 CSS 很低。

【解决方案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 文件中将无法使用自动完成功能。

【讨论】：

评论看起来是一个很好的嵌入解决方案。对于少量的 CSS，我想放弃语法高亮等是值得的。
这也给了我一个在 JavaScript 中实现 heredoc 样式字符串的想法：(function(){/* Your multiline text here */}).toString()

【解决方案3】：

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

我会避免将您的 JS 与您的 CSS 合并。从文件级别来看，这听起来像是一个更清洁的解决方案，我认为它会很快变得混乱。这样，您将失去编辑器为您提供的突出显示和语法帮助。

【讨论】：

【解决方案4】：

查看Csster。我写它就是为了解决这个问题。

您可以使用 Javascript 对象文字语法将 CSS 规则直接嵌入到 Javascript 中。它并不比原始 CSS 更难看。

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

规则被插入到客户端的 DOM 中。这种架构简化了您的构建过程并减少了客户端请求。

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

嵌套干燥样式表
darken 和 saturate 等颜色函数
用于常见 CSS 习惯用法（如 clearfix、圆角、阴影）的内置宏。
自定义行为或跨浏览器支持的扩展点

它经过了很好的测试，我已经在很多项目中使用了它。它独立于 jQuery，但与它配合得很好。

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

【讨论】：

这看起来很有趣。必须尝试一下。我看到了一些缺点，比如不能简单地在 CSS 文件和 JavaScipt 之间复制粘贴样式。似乎也没有办法从 JavaScript 代码中自动提取 CSS 规则。
谢谢。我会改进文档。不，没有简单的方法可以粘贴现有的 CSS 规则......我运行了一些正则表达式，它不需要很长时间 - 但如果你愿意，我可以为此提供一个工具......至于“提取”（反过来），我打算实现这个，但是在第一次使用它之后，我意识到用 Firebug 很容易做到这一点。还有一个扩展点，您可以在 Javascript 中获取此信息。谢谢。告诉我进展如何。