将 JQuery 用于 CSS 与样式表答案

【问题标题】：Using JQuery for CSS vs Stylesheet将 JQuery 用于 CSS 与样式表
【发布时间】：2011-10-01 17:37:57
【问题描述】：

因为我喜欢将所有源代码保存在一个文件中（每个类），所以我决定使用 JQuery 对象添加所有样式和 CSS，即：

jquery : $('<div/>', 
         {
           id:'Object',
           css:{
             height:'100%',
             width:'69%',
             color:'white',
             fontWeight:'bold',
             textAlign:'center',       
             backgroundColor:'#02297f',
             marginLeft:'.5%',
             'float':'left',
             overflow:'auto',
             borderRadius:'5px'
           },                 
           html : 'My JQuery Object'
         }),

现在我知道可能会对性能产生某种影响，但我的问题是有多少？还有其他人这样做吗？我是否忽略了一个潜在的问题？

我喜欢这种方式，因为我可以只使用对象，而不必交叉检查样式表，并且它可以更好地组织。

编辑：这是针对 Javascript 应用程序，而不是网页。所以禁用 Javascript 无论如何都会杀死网页。

【问题讨论】：

对不起，我没有意识到这一点。 ://

标签： javascript jquery css

【解决方案1】：

肯定会对性能产生影响。该脚本仅在加载所有页面时运行，因此在第一次显示页面时会给您带来问题。

除此之外，当您运行禁用 javascript 的浏览器时，您根本没有任何样式。

但最重要的是，这是一个坏主意。 CSS 用于样式化，用于页面的外观。 HTML 用于结构，Javascript 用于逻辑、交互性。我认为您根本不应该使用 .css 方法。如果您需要在 Javascript 中切换样式，请改用类，然后可以使用样式表对其进行样式设置。

但是你的这种方法甚至更进一步。我认为这比将所有 css 都放入内联样式属性中更糟糕。我希望你只是问这个问题，看看人们如何回应。一定不严重。 :s

【讨论】：

为什么作为对象一部分的属性不应该留在对象中？我不一定不同意，但为什么要分开一切？
嗯，也有例外，我在您后来的编辑中看到这是一个 Web 应用程序而不是一个网站（尽管它们之间有一条细线）。但通常更容易将样式分开以使代码更易于维护。即使您在代码中创建动态对象，添加类也可能比添加特定样式更容易。然后，您可以微调 css 文件中的样式，而不必担心在哪里使用它。当然，在真正动态的应用程序中，尤其是动画，单独的样式表可能无法为您提供所需的全部灵活性。

【解决方案2】：

你做错了。

CSS 必须保留在 *.css 文件中，Javascript 必须保留在 *.js 文件中。

有一种东西叫做三层网络：

内容（HTML）
演示文稿 (CSS)
行为（JS）

首先，是的，如果你使用 JS 生成 html 并对其进行样式设置，这将对性能产生巨大影响。但即使忽略它：您也会使代码几乎不可维护。

如果您想要更好地组织样式表，那么请花一些时间来扩展您的 CSS 知识，并查看 OOCSS 背后的实践。

【讨论】：

OOCSS不过是一个流行词，使用它会导致严重的有害后果。
@c69 ，我没有遇到任何“有害后果”，从什么时候开始成为流行语？ 2009 年是“将特异性保持在最低限度”的规则。
为什么无法维护？我不是不同意，我只是不明白。似乎作为对象一部分的属性应该与对象一起使用。我已经广泛使用 CSS，这只是一个想法。

【解决方案3】：

这是一个可怕的想法！改用http://xcss.antpaw.org/

【讨论】：

为什么在 Web 应用程序（不是只读网页）的上下文中这是一个糟糕的想法？

【解决方案4】：

我同意你的做法。我基本上自己使用它。我正在开发一个 html5 游戏，在这种情况下，你所做的事情是有意义的。在游戏中，用户事件和系统事件不断地改变画面。您只能通过即时样式来实际处理这个问题。所以使用 .css() 是一个很好的方法。我认为在游戏中，精灵是如此独特以至于它们需要自己的样式对象。

【讨论】：