CSS 优化：元素 ID 与类答案

【问题标题】：CSS Optimization: Element ID vs. ClassCSS 优化：元素 ID 与类
【发布时间】：2010-11-16 20:50:51
【问题描述】：

通过 MVC 和 jQuery，我显着更多地使用 CSS。想到的一个问题是使用元素 ID 与类的最佳方法是什么。如果我使用元素 ID，则 jQuery 中的选择器会更短。例如：

#imageTag... $('#imageTag')
#searchTag... $('#searchTag')

作为替代方案，它可以使用父容器元素进行结构化。

#searchTool, #classifyTool .tag

在这种情况下，选择器例如

$('#searchTool .tag') 或 $('#classifyTool .tag')

可以使用。当整个页面中存在一个类的多个实例时，这种方法特别有用，例如 .tag。您只需更改父容器对象。

这只是一个简单的理论例子，并不代表真实的风格，只是描绘概念。

所以有两个问题：

有更好的替代方法吗？

谢谢

【问题讨论】：

【解决方案1】：

至于用哪一个，就用哪个最合适。如果您的页面上有一个搜索框，那么使用 ID 将是最合适的，因为只有一个搜索框。另一方面，表格行可能会按类标识，因为存在（或可能）不止一个。

尽量不要使用“.class”之类的选择器（在 CSS 或 jQuery 中）。您强制 jQuery 或浏览器基本上遍历整个文档树。大多数情况下，该类仅适用于一种标签，因此请指定（例如“div.class”）。仅此一项就可以产生巨大的性能差异（尤其是在具有大型文档的 jQuery 上）。

不应该考虑选择器的长度。性能、可读性和可维护性应该是。

【讨论】：

+1 - 从技术上讲是正确的，但我要更强烈地强调性能差异几乎完全是理论上的事实 - 在现实世界的场景中它实际上并不重要。
（假设一个人正确使用它们——你的 element.class 与只是 class 的例子是一个很好的例子）
不真实，我已经将页面加载时间从 >1 秒减少到
类名在大多数浏览器中不应该太慢，因为几乎每个浏览器都有getElementsByClassName() 方法。这里唯一失败的是 IE，诚然，这是一个重要因素。另外，我应该指出，我没有看过 jQuery 的 Sizzle 选择器引擎代码，所以我不知道引擎是否使用它来优化任何东西。查询也可以通过使用新的QuerySelectorAll() 方法来加快查询速度，从而使 jQuery 选择器的速度变得更不相关，但这种支持更少。
谷歌页面速度文档建议优先选择类和 ID 选择器而不是标签选择器：code.google.com/speed/page-speed/docs/rendering.html

【解决方案2】：

我通常更喜欢类方法。原因是您不必为系统中的每个新 ID 元素编写新的 css 选择器。

另外，我倾向于区分“结构”和“样式”css。这意味着，我将处理大小（宽度/高度）和位置的内容与处理字体粗细、颜色等的 css 类分开。

对于不变的结构框架部分，我将使用 ID。对于在 HTML 中可能有多种表示形式的部分，我将坚持使用类机制。

【讨论】：