大型CSS与大型HTML

Question

将HTML限制为少数类和ID以及将HTML的大小保持在较低状态是否更好？或者更好地使用大量嵌套CSS。

这些是我能想到的优点。

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

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

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

• 整个网站的小HTML尺寸
• CSS被缓存
• 更好地组织代码（我使用的是LESS）

感谢。

Answer 1

我认为任何一天都可以在大型HTML上使用大型CSS。您的CSS将被缓存，因此使用较小的HTML可以加快页面加载速度。更多的类确实意味着更多的灵活性，但是你会惊讶于使用CSS选择器可以实现多少。我唯一一次看到膨胀HTML作为有用的东西是SEO;请参阅microformats了解我的意思。

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

Answer 2

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

关于你的问题

  

是否更好地将我的HTML限制为尽可能少的类和ID并保持HTML的大小或者更好地使用很多   嵌套的CSS规则。

从渲染性能的角度来看，使用平面（一级）选择器实际上更有利，因为浏览器引擎从右到左匹配，即更喜欢.list-item-first到ul li:first-child - 这样做不太容易管理从维护保险的角度来看，但性能略有提升。与此同时，你很少看到合理大小的样式表有所不同，所以更多的是偏好。

More on css rendering performance

Answer 3

我坚决反对在你的CSS中使用很多nesting .. css嵌套的一个问题是它使你的css代码不那么可重用。我建议你看看this页面，该页面解释了面向对象的CSS（OOCSS）的概念，它具有以下关键概念：

“很少使用依赖于位置的样式”。无论你把它放在哪里，一个物体应该看起来都一样。因此，不要使用<h2>设置特定.myObject h2 {...}样式，而是创建并应用描述相关<h2>的类，例如<h2 class="category">.*

要查看有关使用css选择器的原因的更详细讨论，请参阅我的回答here。