有什么其他理由可以节制地使用 id?
What other justifications are there for using id's sparingly?
虽然我不需要说服 id
选择器应该谨慎使用并且 class
选择器应该主要用于应用 CSS ,但我无法解释它给我的小组项目的成员。当我们作为一个小组开会审查每个人的 HTML 和 CSS 文件时,我注意到他们对几乎所有内容(包括不唯一的元素)都使用 id
选择器。虽然我解释说 id
选择器应该只用于为 CSS 中非常独特的元素设置样式,而 class
选择器应该用于将 CSS 应用于其他所有元素,因为它们重新可用性,现在我试图记住其他原因。所以我的问题是对于非唯一元素使用 class
选择器而不是 id
选择器还有什么其他原因?
正如您提到的,id
s 的独特性足以让我们不将它们用作选择器,但还有更多:
一个元素可以有多个class
,但只能有一个id
。您可能希望同一元素既是 .news-article
又是 .breaking-news
。如果您使用 JavaScript,您可以有一个 class 用于样式设置 (.unstyled-list
),另一个用于您的脚本 (.side-menu
)。这样您就可以在不破坏脚本的情况下将列表更改为 .roman-numerals
。
使 id
应用样式更糟糕的是它们的独特性和更高 specificity 的结合。如果您使用 id
进行样式设置,您肯定会陷入特异性竞赛(特别是如果您需要随着时间的推移保持 CSS,这很可能就是这种情况)。
虽然我不需要说服 id
选择器应该谨慎使用并且 class
选择器应该主要用于应用 CSS ,但我无法解释它给我的小组项目的成员。当我们作为一个小组开会审查每个人的 HTML 和 CSS 文件时,我注意到他们对几乎所有内容(包括不唯一的元素)都使用 id
选择器。虽然我解释说 id
选择器应该只用于为 CSS 中非常独特的元素设置样式,而 class
选择器应该用于将 CSS 应用于其他所有元素,因为它们重新可用性,现在我试图记住其他原因。所以我的问题是对于非唯一元素使用 class
选择器而不是 id
选择器还有什么其他原因?
正如您提到的,id
s 的独特性足以让我们不将它们用作选择器,但还有更多:
一个元素可以有多个class
,但只能有一个id
。您可能希望同一元素既是 .news-article
又是 .breaking-news
。如果您使用 JavaScript,您可以有一个 class 用于样式设置 (.unstyled-list
),另一个用于您的脚本 (.side-menu
)。这样您就可以在不破坏脚本的情况下将列表更改为 .roman-numerals
。
使 id
应用样式更糟糕的是它们的独特性和更高 specificity 的结合。如果您使用 id
进行样式设置,您肯定会陷入特异性竞赛(特别是如果您需要随着时间的推移保持 CSS,这很可能就是这种情况)。