2

我阅读了一篇关于使用 css 类名而不是 id 属性来识别模块或小部件的有趣帖子。css 类名可以用哈希或下划线作为前缀，表示类名用作 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>

它在文章中建议，可以使用下划线代替哈希，因为需要对哈希进行转义。

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

4

3 回答 3

7

没有比这更简单的了：它现在和永远唯一地标识文档树中的元素吗？使用身份证。如果没有，请使用类名。

请记住，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 开头的标识符中允许使用哈希，我理解这样说具有讽刺意味。）

于 2013-07-12T12:50:20.443 回答
0

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

我建议如下：

SMACSS
OOCSS
MVCSS

他们都提到了一个或多或少相似的 CSS 命名约定，同时还说这些只是经验法则，而不是教条。

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

.modName // module

.modName__sub // an object or sub-module

.modName__sub--modifier // a modifier

InuitCSS 使用了类似的结构

如果您想使用类名作为唯一标识符，而不仅仅是这样做，那并没有错。此外，如果您希望将其用作“标准”类，它是未来的证明。但是，出于明显的原因，我会回避那个哈希值。

于 2013-07-12T12:22:08.340 回答
0

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

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

2：DOM 元素用于样式目的（CSS），然后我使用类名。我尽可能将类名描述为 DOM 元素正在做什么。我不使用 .blue_text 之类的 vauge 名称（如下所述）。

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

于 2013-07-12T12:39:07.260 回答