1

在课堂上，我们被教导避免在 HTML 中创建 ID，以便您可以使用它们来识别 CSS 文件中的元素。相反，我们必须尽可能地使用选择器特异性。

以这个简单的 HTML 为例：

<body>
  <div>
     <div>
       <div>
          The div you want to style.
       </div>
     </div>
  </div>
</body>

使用这个更好吗：

body > div > div > div{
     color: blue;
}

或者给元素一个id（让我们取'middle'）并使用它：

#middle{
     color: blue;
}

在性能和可用性方面有什么区别（如果有的话）？

4

3 回答 3

2

现代浏览器中 ID 和类之间的速度差异在现实世界中可以忽略不计，这真的不是问题。因此，当前的主要思路是使用需要额外清晰度和特异性的类。通过这种方式，您可以避免特殊性战争，并在可维护性和代码纯度之间取得平衡。

<body>
  <div>
     <div class="more-specific-if-needed">
       <div class="middle">
          The div you want to style.
       </div>
     </div>
  </div>
</body>

.make-more-specific-if-needed .middle {
    /* cool styles */
}

甚至使用链式选择器来获得额外的特异性。然后，您可以将样式拆分为基于结构的构建样式和基于外观的主题样式。

<body>
  <div>
     <div>
       <div class="semantic-role theme">
          The div you want to style.
       </div>
     </div>
  </div>
</body>

.semantic-role.theme {
    /* cool styles */
}

进一步阅读：

于 2013-04-20T10:04:56.763 回答
1

用身份证好很多。性能差异很小，并不是重点。我认为代码的可读性/可维护性更重要。

使用 ID 的一个优点是，您可以将元素移动到页面的不同部分，并且它会保留其样式规则 - 不计算包含的元素。

于 2013-04-20T08:39:23.997 回答
1

性能方面，通过它获取元素id比遍历 dom 最快。

从可用性的角度来看，我会小心使用太多的 id，因为它们只能用于一个元素一次。

所以这是一个你认为更重要的问题以及我们在谈论多少项目。速度增益是否值得失去可重用性

于 2013-04-20T08:35:33.133 回答