是否可以使用css类名作为模块或小部件的id？

Question

我读了一篇关于使用css classname而不是id属性来识别模块或小部件的有趣帖子.css类名可以使用哈希或下划线作为前缀,以指示类名用作id.这样做的原因是,每个网页只能使用一次ID,而模块或小部件可能会出现多次.

简单的例子

而不是使用诸如的ids

<div id="currencyConverter1" class="foo">EUR/USD</div>
<div id="currencyConverter2" class="foo">GB/USD</div>

使用前缀类名

<div class="#currencyConverter foo">EUR/USD</div>
<div class="#currencyConverter foo">GB/USD</div>

在它建议的文章中,可以使用下划线而不是散列,因为哈希需要被转义.

我非常喜欢这个想法,但我不确定这是好的做法还是有任何弊端.对此有何普遍看法？

Answer 1

它并不比这更简单:它是否现在和永久地唯一地标识文档树中的元素？使用ID.如果没有,请使用类名.

请记住,ID和类是与每个元素相关的属性,而不是一组元素.使用"标识符"来表示"识别一组元素"是徒劳的; 这就是为什么你要使用类名,将这些元素分类为以某种方式相关.

如果您"识别" 属于特定窗口小部件或模块的元素,则可以自由地为表示该窗口小部件或模块的每个元素添加类名,并在元素的类之外选择它:

<div class="my-module foo">.my-module.foo</div>
<div class="my-module bar">.my-module.bar</div>

或者,如果特异性是一个巨大的问题,您甚至无法将另一个类选择器堆叠到您的规则中,请在元素的类名前加上该模块的名称并选择它.

<div class="my-module-foo">.my-module-foo</div>
<div class="my-module-bar">.my-module-bar</div>

如果是这样的问题,那么是的,这是完全合法的-正如我所提到的,这是整个点的类名和选择的.

但是,使类选择器"看起来像"一个ID选择器而没有像那样运行,没有合法的好处.另一方面,它造成的是不必要的混淆,特别是对于其他可能不太了解的作者.如果你想避免像瘟疫ID选择,精细,让他们独立; 没有人强迫你使用它们.但是如果你想要唯一地识别单个元素,那么你可能想要记住CSS已经提供了一个功能来补充idHTML中的属性,称为ID选择器.没有必要破解选择器语法的其他部分来模拟一些已经很容易获得的其他功能,并且从一开始就是这样.

顺便提一下,如果你遇到CSS规则的特殊性问题,那么你的CSS规则需要重构,而不是你的标记.黑客攻击你的标记以适应你的风格规则只会导致进一步的麻烦,至少在我的经验中.(我理解这一点具有讽刺意味,因为在HTML5开头的标识符中允许使用哈希值.)