在jQuery中实现CSS

Implementing CSS in jQuery

本文关键字：CSS 实现 jQuery      更新时间：2023-09-26

假设一个人正在开发一个足够非密集的Web应用程序，以至于开销不是问题。只在Javascript/jQuery中实现CSS并完全放弃外部css文件是否合理？

$('<div/>').attr({'id':'special_box'}).addClass('little_box').appendTo('body')
$('<div/>').addClass('little_box').appendTo('body')
$('<div/>').addClass('little_box').appendTo('body')
...
$('.little_box').css({'color':'red'})
$('#special_box').css({'color':'blue'})

有人主张这种完全合并吗？有什么东西可以完全阻止它或使它明显不合理吗？

编辑

正如下面有益地解释的那样，不合理的是jQuery css函数正在创建应用于单个元素的样式，而不是像我假设的那样创建/增强主css规则。

尽管似乎确实有办法实现这种合并。我没有资格分析它们。谢谢大家。

这是不合理的，不仅因为它很慢(如您所料(，任何涉及类的.css调用，例如 $('.little_box').css(...) ，将仅将 CSS 应用于当时存在的该类的元素，而不是将来创建的.little_box ES。

为什么要在

开发时使自己复杂化，CSS比通过javascript或jQuery做css要容易得多，也更好用。

除了物理编码非常耗时之外，您还可以执行此操作。但是，它比CSS密集得多，并且阻止了CSS的许多优点。

这就像建造一个石油钻井平台和炼油厂来装满你的车。你可以做到，但为什么不直接去加油站呢？

我不主张这种完全合并 - 当然是出于其他人已经说过的原因，但也出于以下两个原因：

1( 如果您的应用程序增长并且有多个.js文件，那么如果您尝试使用 require 之类的东西实现文件的模块化加载，这将会产生额外的麻烦.js

2(同样，如果你的应用程序变得非常大，或者你决定要这样做，那么开始使用Sass会有更多的工作

。

正如我确信的那样，这个想法的缺点大大超过了(可疑的(优点。

以这种方式构建网站是完全可能的，但是要做更多的工作，维护它也会做更多的工作。因此，没有什么可以完全阻止它，但是根据样式的数量，这可能是很多额外的工作，这是不合理的。

还有一个性能因素。CSS代表级联样式表，使用这种方法，您将丢失"级联"和"工作表"，只剩下样式。实际上，这意味着您将每个样式应用于每个元素，而不是指定应用于多个元素的规则。jQuery 选择器可以帮助您将相同的样式应用于多个元素，但它仍将循环遍历它们并将样式应用于每个元素。

由于这种情况发生在浏览器中，因此在页面加载时可能会有明显的延迟。此外，样式将在创建所有元素后应用，而不是在元素存在时已经存在，因此访问者可能会看到页面完全显示而不设置样式，然后在应用样式时完全冻结，然后正确显示。

相关文章：