Question

我很想知道添加类与向元素添加属性以便动态设置它们。

将CSS属性应用于满足特定参数的某些元素的约定通常通过将类应用于该元素来完成。例如，如果我点击一个按钮，该按钮可以说是处于活动状态 - 我可以选择在点击时将自定义类应用到它，如下所示：

$(".button").click(function(){
    $(this).addClass("active");
});

CSS简单如下：

.button.active {
    transform: scale(1.5);
}

我的方法不同，我很好奇两者之间是否存在明显差异。我将属性应用于元素而不是类，如下所示：

 $(".button").click(function(){
     $(this).attr("active", true);
 });

使用这样的CSS：

.button[active] {
    transform: scale(1.5);
}

我想知道是否有任何理由我不应该这样做，即如果这是一个不好的约定或其他什么，并且在这种方法中有任何性能差异。通常只是好奇，但也想知道使用像$(".button[active]")这样的查询是否比$(".button .active")更不具备性能。

Answer 1

Mozillas Writing efficient CSS tl; dr for this：

属性选择器是通用选择器

通用规则

所有其他规则都归入此类别。

实施例
[hidden="true"] {…} /* A universal rule */`
* {…}     /* A universal rule */
tree > [collapsed="true"] {…} /* A universal rule */

不要使用通用选择器。

避免普遍规则

确保规则不会以通用类别结束！

但有active discussion on css selectors。

最有趣的是，CSSLint因性能原因而考虑disallowing unqualified attribute selectors。

因此，我会坚持使用已经证明具有高效性的类选择器（一如既往地不被误用;）。

Answer 2

有人为similar堆栈溢出问题的答案创建了性能测试。

http://jsperf.com/id-vs-class-vs-tag-selectors/2

看起来类选择器比属性选择器快得多，但显然数量会根据浏览器的不同而变化。

关于属性与类之间是否有任何性能（或其他）差异？

2 个答案: