html - 在 HTML 中只使用类的缺点？

Question

在 HTML 中仅使用类而不是 id 和类是否有任何负面影响？ (意思是即使一个元素出现一次，它仍然被赋予一个类而不是一个id)

编辑 - 将 JavaScript 与类而不是 id 一起使用时，性能受到的影响有多严重？

Answer 1

JavaScript

对于 JavaScript，ID 提供了一种快速且确定的方式来选择一个且仅一个元素。按类选择(例如使用像 jQuery 这样的库)可能很有用，例如“对类名为 XYZ 的所有元素执行此操作”。

性能

How severe is the performance hit when using JavaScript with classes as opposed to ids?

试试看: http://jsperf.com/class-versus-id .在 Chrome 中，我看到了不同的差异(使用类名慢 5%-40%)。请注意，getElementsByClassName 并未得到普遍支持(John Resig 有一个 comparison of custom implmentations)。

CSS

从 CSS 的 Angular 来看，我很少使用 ID，并且只有在我知道永远会有一个匹配项时才使用 ID(因为 ID 必须是唯一的)。

但是，我认为这个问题忽略了 CSS 最重要的能力之一:使用 structural selectors 的能力。 .如果没有这些选择器与类(有时还有 ID)的结合，您将面临拥有更加脆弱和冗长的 CSS 的风险。

当在像 Sizzle 这样的引擎中实现时，复杂的选择器在 JavaScript 中也非常有用。 .

换句话说，每个元素可能不应该有明确分配给它的 ID 和/或类。

考虑:

.foo .bar1 { }
.foo .bar2 { }
#bar3 { }

对比:

.foo > SECTION { }
.foo > SECTION + SECTION { }
.foo:last-child { }

SECTION H2 { }
P + P { margin-top: 1em; }
/* etc */

在第一个示例中，所有内容都必须明确标识或声明类。第二个示例更多地依赖于文档结构。

最终目标应该是可维护代码优先，同时尽可能实现最干净的标记。