大型CSS与大型HTML

将HTML限制为几个类和ID并保持较低的HTML大小更好，还是使用大量嵌套CSS更好

这些都是我能想到的对双方都有利的地方

使用少量嵌套CSS规则的优点：

• 较小的CSS文件
• CSS中元素的有效定位
• CSS中的渲染时间可能更快（对此不确定）

使用大量嵌套CSS规则的优点：

• 整个站点的小HTML大小
• CSS被缓存
• 更好的代码组织（我使用更少的代码）

---

谢谢。

任何一天，我都会争论大型CSS而不是大型HTML。你的CSS将被缓存，因此你的页面将以更小的HTML加载得更快。更多的类确实意味着更大的灵活性，但您会惊讶于使用CSS选择器可以完成多少工作。我唯一一次看到将HTML扩展为有用的东西是用于SEO；请看我的意思的一个例子

---

准确性不应该是一个问题（即使你将人为错误考虑在内，你也应该能够立即抓住你的错误）。就速度而言，我怀疑它对性能有影响。请记住，所有渲染都是在客户端完成的，因此您不必担心服务器会因为更复杂的CSS选择器而做更多的工作。

绝对同意Wex re CSS缓存（更多CSS，更少html）

至于你的问题

是最好将我的HTML限制在尽可能少的类和ID中，并保持HTML的大小较小，还是大量使用更好 嵌套的CSS规则

从渲染性能的角度来看，使用平面（一级）选择器实际上更为有利，因为浏览器引擎从右到左匹配它们，即更喜欢

。首先列出项目

到

ul li:first child

——从维护角度来看，这不太容易管理，但会带来更好的性能。同时，在一个合理大小的样式表中，您很少看到有什么不同，所以这更多是一个偏好的问题

---

我强烈反对在你的css中使用大量的css。。css嵌套的一个问题是，它使css代码的可重用性大大降低。我建议您看一看解释面向对象CSS（OOCSS）概念的页面，该页面有以下关键概念：

“很少使用位置相关样式”。无论你把一个物体放在哪里，它看起来都应该是一样的。因此，不要用

.myObject h2{…}

设置特定的

样式，而是创建并应用一个类来描述所讨论的

，如

*

---

要查看更多关于为什么使用css选择器会受到限制的详细讨论。。查看我的答案。

如果浏览器未缓存CSS，则说明您做错了。很抱歉，这是问题中的一个错误。我的意思是HTML不会被缓存。这取决于性能是否重要。。您是否有不断改变dom的JavaScript？如果是这样的话，那么更小的CSS将更有效。否则性能就不会真正体现出来。@LukePage我明白了。谢谢你的评论。就提高整个网站的一致性而言，这绝对是一个很好的建议。