3

将 HTML 限制为少数类和 id 并保持 HTML 的大小较小或者使用大量嵌套 CSS 是否更好。

这些是我能想到的两者的优势。

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

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

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

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

谢谢。

4

3 回答 3

12

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

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

于 2012-06-22T02:50:12.437 回答
2

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

至于你的问题

是否最好将我的 HTML 限制为尽可能少的类和 id，并保持 HTML 的大小较小，或者使用大量嵌套的 CSS 规则是否更好。

从渲染性能的角度来看，使用平面（一级）选择器实际上更有利，因为浏览器引擎从右到左匹配它们，即更喜欢.list-item-first-ul li:first-child从维护的角度来看，这不太容易管理，但会带来更好的性能。同时，您很少会在合理大小的样式表中看到差异，因此这更多的是偏好问题。

更多关于 css 渲染性能的信息

于 2012-06-22T03:03:02.437 回答
1

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

“很少使用与位置相关的样式”。一个物体无论放在哪里都应该是一样的。<h2>因此，与其设置特定的样式，不如.myObject h2 {...}创建并应用一个描述相关<h2>问题的类，例如<h2 class="category">.*

要查看有关为什么使用 css 选择器可能会受到限制的更详细讨论。请参阅我的答案。

于 2013-03-02T08:21:20.760 回答