Question

我在使用css classname而不是id属性读取interesting post来识别模块或小部件。 css类名可以使用哈希或下划线作为前缀，以指示类名用作id。这样做的原因是，每个网页只能使用一次ID，而模块或小部件可能会出现多次。

简单示例

而不是使用诸如

之类的ID

<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>

在它建议的article中，可以使用下划线而不是散列，因为哈希需要转义。

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

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已经提供了一个功能来补充HTML中的id属性，称为{{3} }。没有必要破解选择器语法的其他部分来模拟一些已经可以使用的其他功能，并且自ID selector以来就一直存在。

顺便提一下，如果您遇到CSS规则的特殊性问题，那么您的CSS规则需要重构，而不是您的标记。黑客攻击你的标记以适应你的风格规则只会导致进一步的麻烦，至少在我的经验中。（我理解讽刺的是，鉴于在HTML5开头的标识符中允许使用哈希值。）

Answer 2

它主要由你自己的个人品味所驱动。关于这个话题有很多意见和文章，甚至还有完整的书籍。

我建议如下：

SMACSS
OOCSS
MVCSS

所有人都提到了一个类似于CSS的类似命名约定，同时也说这些只是经验法则，而不是教条。

个人而言，我遵循这种方法：

.modName // module

.modName__sub // an object or sub-module

.modName__sub--modifier // a modifier

InuitCSS使用类似的结构

如果你想使用类名作为唯一标识符，而不仅仅是这样做，那就没有错。此外，如果您希望将其用作“标准”类，它将来是未来的证据。但是，出于显而易见的原因，我会推卸哈希。

Answer 3

不确定你的模块或小部件是什么（wordpress？），但我在编码时选择使用的方法是：

1：如果是具有特定功能的DOM元素，我知道它只在页面上出现一次，那么我使用ID（类似#main_navigation，＃global_header）。

2：DOM元素用于样式（CSS）然后我使用类名。我保持类名称描述DOM元素正在做什么。我不会使用像.blue_text这样的虚拟名称（如下所述）。

3：我需要将某种信息附加到DOM元素上，这种信息有点尴尬，并不适合这种方案，然后我使用自定义HTML数据属性。例如，如果我为网站创建后端，并且用户可以为div选择背景颜色，而不是将.user_selected_background_color_class作为类添加到div中，我将改为编写data="user_selected_color"。这是一个蹩脚的例子，但我只是建立了一些用户可以选择一组图像处于图库模式或幻灯片模式的东西，我使用数据属性来确定容器div应该如何设置样式。

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

3 个答案: