我应该在CSS定义中为每个元素/类编写完整的层次结构路径吗？

Question

我的样式表定义是否应该镜像DOM层次结构？如果我有:

<div id="container">
  <div class="item">
    <div class="property">
       <span id="1243"></span>
    </div>
  </div>
</div>

当我想为每个房产设置样式时,我应该说:

.property { color: red; }

或者我应该这样做

#container .item .property { color: red;}

我用过这两个.我喜欢第一个简洁,因为如果层次结构改变我不需要更新它,但第二个帮助我阅读CSS.

Answer 1

与任何代码(或任何书写)一样,您应该编写它以尽可能清晰准确地表达您的意图.

所以,如果你想要一个具有类的元素的元素,这个类property的元素的类item本身是一个id container为具有这些样式的元素的后代,那么就写#container .item .property.

如果你想要一个具有类的元素property来拥有这些样式而不管它是什么后代,那么写一下.property.这适用于您希望在网站上的许多不同位置使用的类; 例如按钮样式.

我要注意的一件事是你添加的每个CSS选择器都会增加选择器的特异性,即#container .item .property更具体.property.所以应用的样式#container .item .property将需要一个更具特异性的选择器来覆盖它们,如果你想稍后,强迫你再次写出这个更长的选择器.但是,与写下你的意思相比,我认为这是次要问题.