5

我正在开发一个大型 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 保持同步？

4

4 回答 4

2

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

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

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

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

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

于 2011-01-08T21:52:15.867 回答
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 文件中将无法使用自动完成功能。

于 2011-01-08T21:54:36.220 回答
1

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

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

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

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

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

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

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

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

于 2011-01-08T23:49:24.870 回答
1

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

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

于 2011-01-08T21:52:45.287 回答