css - 如果 CSS 选择器是按#id，你需要限定它们的范围吗？

Question

如果我有这样的结构:

<div id="main">
  <div id="sidebar">
    <div id="tag-cloud"/>
  </div>
</div>

...什么是 css 的最佳实践:

#main #sidebar #tag-cloud { ... }
#tag-cloud { ... }

或者如果 id='main' 被替换为 class='main'，范围会更糟吗？我只是想知道，如果您有 ID，是否还需要确定范围？

Answer 1

视情况而定。大多数时候，你可以说:

#tag-cloud { ... }

是最好的(性能方面，见下文)。这:

#main #sidebar #tag-cloud { ... }

只是做了很多必然会成功的不必要的检查。

除非你想这样做:

#sidebar #tag-cloud { ... }
#not-sidebar #tag-cloud { ... }

在这种情况下，作用域根据 #tag-cloud 所在的位置定义不同的外观。当然，您的页面中只能有一个 #tag-cloud，但您的 CSS 无论如何都可以处理这两种情况。

---

CSS 检查是从右到左进行的。这:

#main #sidebar #tag-cloud { ... }

计算结果为:“ID 为 tag-cloud 的元素的父元素为 sidebar，父元素的 ID 为 main。如果您的网站无论如何就是这样，那只是一大堆无用的 DOM 遍历。

更不用说如果您修改站点结构，整个 CSS 必须在很多地方进行更改，如果您修改网站结构，那么由于过于具体、多余的范围，这在某种程度上违背了目的。