动态生成的css

Question

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

我看到几个好处：

• 负荷只有一个js文件，而不是两个js和css
• 定义上飞主题化的能力（例如：输入颜色变量）来定义选择
• 能力在飞行（如命名空间中的类名）
• 新增浏览器特定的风格

会有什么弊端这种方法？你能推荐关于这个主题的任何好的参考吗？

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

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

Answer 1

另一个好处是，那就是在页面加载每增加资产减慢了整体页面加载，因为浏览器是通常只在给定的时间同时加载4个资产。

但是，在页面加载时完成所有的组合操作可能会导致页面的运行速度与单独处理的速度一样慢......取决于需要通过迭代来构建最终的css块。

在性能方面，我认为javascript不太可能会优雅/高效地替换已包含在组合css文件中的样式。

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

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

Answer 2

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

Answer 3

更少是绝对可怕的，我不认为你应该尝试使用JavaScript中的自定义库生成CSS。将你的javascript尽可能与你的CSS分开是一个好主意。

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

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

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

确保您所有的css在任何时候都被加载（而不仅仅是部分）也有助于强制执行没有冲突的规则。如果您必须重构应用程序并将其中的部分内容移至其他网址（突然出现所有突然重叠的情况），这将对您有所帮助。

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

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