2

我正在考虑用 JavaScript 动态生成的样式标签替换一些静态 css 文件。我的目的不是为整个文档构建样式表，而是将其用于添加到页面的插件，例如选项卡、幻灯片等。我目前处理的样式表有 10 到 20 行。

我看到了几个好处：

  • 只加载一个js文件而不是js和css
  • 动态定义主题的能力（例如输入颜色作为变量）
  • 动态定义选择器的能力（例如命名空间的类名）
  • 添加浏览器特定样式

这种方法的缺点是什么？你能推荐关于这个主题的任何好的参考资料吗？

我做了一些研究，发现了以下工具：

  • less - 但仍然需要加载单独的样式表
  • DiceJS（显然是一个新库）
4

3 回答 3

1

Less 绝对很棒，我认为您不应该尝试使用 javascript 中的自定义库生成 css。让您的 javascript 与您的 css 尽可能分开是一个好主意。

我们使用某些元素 class="" 属性来触发 javascript 逻辑，但它们不会与我们的 less 样式中使用的类重叠。（我们对两者使用不同的大小写规则以防止发生重叠）。

动态加载 CSS 的一部分也没有太大的好处。我们在开发过程中运行了less.js javascript，但我们为生产运行了'lessc'编译器，所以我们总是有1个样式表（并且还使用YUI Compressor对其进行压缩）。

除非总的 css 绝对是巨大的，否则我们更喜欢在第一次点击时加载一个大 css 文件，然后缓存文件。

确保始终加载所有 css（而不仅仅是部分）也有助于您强制执行没有冲突的规则。如果您必须重构并且您的应用程序的一部分移动到其他 url（所有突然重叠变得可见），这将真正使您受益。

所以我建议，与其尝试通过动态生成所需的样式来解决您的问题，不如为您的 css 提供更好的组织。

如果您正在寻找有效使用 less 的绝佳示例，请查看Twitter Bootstrap

于 2012-04-02T20:07:56.617 回答
0

在我看来，为 CSS 使用 JavaScript 听起来有点混乱。当你提到你自己时，我会建议你使用LESS或SASS或类似的。是的，它会导致加载一个额外的资源，但与使用 JavaScript 进行样式设置相比，我认为这是非常值得的。在我看来，这是一个错误的工具。

于 2012-04-02T20:05:49.060 回答
0

另一个好处是页面中加载的每个附加资产都会减慢整个页面的加载速度，因为浏览器通常在给定时间仅同时加载 4 个资产。

但是，在页面加载时进行所有这些组合可能会导致页面从单独的处理中减慢......这取决于它需要迭代多少东西来构成最终的 css 块。

在性能方面，在我看来，javascript 不太可能优雅/有效地替换将包含在组合 css 文件中的样式。

另一件事是，在生产环境中，您还可以执行另一种选择，即使用库来预先生成一组缩小、优化（在 JS 的情况下是混淆的）代码，然后有 1 个 js 文件和 1 个在页面加载时加载的 css 文件，反过来你会缓存它以获得速度/加载优势。我认为样板库有一个脚本。

一天结束：能量既不会被创造也不会被破坏——如果你不小心，你在一个地方的优化会在其他地方伤害你。

于 2012-04-02T20:09:25.473 回答