Question

在课堂上，我们会教您不要在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{
     color: blue;
}

明智的性能和可用性有什么不同（如果有的话）？

Answer 1

现代浏览器中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 */
}

进一步阅读：

Answer 2

性能明智的是，通过id获取元素的速度最快，而不是遍历dom。

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

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

Answer 3

使用ID要好得多。性能差异很小，而不是重点。我认为代码可读性/可维护性更重要。

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

在选择器ID上使用CSS选择器特性？

3 个答案: