动态生成的CSS

Question

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

我看到了几个好处：

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

这种方法的缺点是什么？你能就这个话题推荐一些好的参考资料吗？

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

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

Answer 1

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

我们使用某些element class =“”属性来触发javascript逻辑，但它们从不与我们的较少样式中使用的类重叠。 （我们使用不同的套管规则来防止重叠发生）。

动态加载部分css也没有那么多好处。我们在开发期间运行了less.js javascript，但我们运行'lessc'编译器进行生产，因此我们总是有1个样式表（并且还使用YUI Compressor压缩它）。

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

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

所以我建议，不要试图通过动态生成所需的样式来解决您的问题，您可能只需要更好地组织您的CSS。

如果您正在寻找有效使用less的一个很好的例子，请查看Twitter Bootstrap

Answer 2

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

Answer 3

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

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

就性能而言，我似乎不太可能优雅/高效地替换已经包含在组合css文件中的样式。

另一件事是在生产环境中，你也可以做另一种选择，即使用库预先生成一组缩小的，优化的（在JS的情况下是混淆的）代码然后有1个js在页面加载时加载的文件和1个css文件，反过来你可以缓存速度/加载的好处。我认为Boilerplate lib有一个脚本。

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