使用css选择器或更直接id？

Question

这更像是一个概念性问题.最近我发现自己对这种html更有信心(例子)

<div id="mainCont">
  <div id="mainContFirst">Text <span id="mainContFirstSpan">option</span></div>
  <div id="mainContSecond">Other Text</div>
</div>

将所有重要标记标记为ID,您可以轻松地写下css:

#mainContFirst {} etc

这是一个糟糕的实践吗？我应该只使用css选择器吗？这比使用选择器快吗？

谢谢

分组(编辑)

好的,那么应该具有相同风格的元素呢？

比方说,例如在每个div中,第二个<span>应该font-size:10px;让它更好:

<div>
   text text <span></span> <span id="firstDivSpan"></span>
</div>
 <div>
   text text <span></span> <span id="secondDivSpan"></span>
</div>

然后是css:

#firstDivSpan, #secondDivSpan {...}

或者像这样？

 <div>
   text text <span></span> <span id="firstDivSpan" class="commonStyle"></span>
</div>
 <div>
   text text <span></span> <span id="secondDivSpan" class="commonStyle"></span>
</div>

.commonStyle{...}

什么更好？

Answer 1

ID选择器是最快的.这根本不是不好的做法; 你只是假设你的网页上只有一个带有该ID的元素.

这就是说你不应该滥用ID,因为渲染性能等蹩脚的原因.使用ID来标记真正独特的元素,而不是标记所有内容,这样你就可以忘记后代组合子,类,组等等.其他选择器使CSS变得如此强大,而不仅仅是ID选择器.

问题编辑:在这种情况下没有更好的问题.除了性能问题(因为它们根本不重要),它在很大程度上取决于选择器的含义.

如果您的样式适用于具有.commonStyle该类的任何元素,则使用类选择器.如果您只想针对这两个特定的spans而不管哪个类,则ID选择器更合适.