动态生成的css

Dynamically generated css

本文关键字:css 动态      更新时间:2023-09-26

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

我看到了几个好处:

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

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

我做了一些研究,发现了以下工具:

  • 较少,但仍需要加载单独的样式表
  • DiceJS(显然是一个新的库)

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

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

动态加载css的一部分也没有那么多好处。我们在开发过程中运行了less.js javascript,但我们在生产中运行了"lessc"编译器,所以我们总是有一个样式表(并用YUI压缩器压缩它)。

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

确保所有css始终加载(而不仅仅是部分加载)也有助于确保没有冲突的规则。如果您必须进行重构,并且应用程序的某些部分移动到其他url(突然出现重叠),这将对您大有裨益。

因此,我建议,与其试图通过动态生成所需的样式来解决问题,您可能只需要更好地组织css。

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

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

然而,在页面加载时进行所有这些组合可能会导致页面的速度与单独处理的速度一样慢。。。这取决于它需要迭代多少东西来组成最终的css块。

就性能而言,在我看来,javascript不太可能优雅/高效地替换组合css文件中包含的样式。

另一件事是,在生产环境中,您还可以做另一个选项,即使用库预生成一组缩小、优化(在JS的情况下是模糊的)代码,然后在页面加载时加载1个JS文件和1个css文件,这反过来又可以缓存以提高速度/加载效率。我想Boilerplatelib有一个脚本。

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

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