css - 在 CSS 或 SASS 中，是否不建议使用 "#foo #bar { width: 200px }"来增加文件大小？

Question

简短的问题是:是否不建议使用以下(另一个 id 下的 id)来增大 CSS 文件大小？

#product-box #product-photo { width: 200px }

---

详情:

有时在 SASS 中，我们可能有

#product-box

  margin-top: 20px

  #product-photo
    width: 200px

这样，就意味着它是“嵌套”的——也就是说，#product-photo 的宽度为 200px 的样式仅在 #product-box 中为真，从 SASS 生成的 CSS 是

#product-box { margin-top: 20px }
#product-box #product-photo { width: 200px }

但是这里我们在#product-photo之前多了一个多余的#product-box，因为#product-photo本身可以唯一标识元素已经存在。

因此，CSS 文件可能会变得臃肿。我想知道是否建议取消缩进SASS文件中的#product-photo，这样就不需要嵌套了？

我认为我们可以在 #product-box 中有一个 .photo 类...是这样吗？但在某些情况下，我们可能在 #product-box 中有 2 张照片或 2 个 li，因此使用类无法唯一标识元素。如果我们使用 jQuery，我们确实可以说 $('#product-box li:eq(2) 来访问任何元素，但是如果有人添加另一个 li 可能会引入错误 不知道 jQuery 代码依赖于它。拥有 id 将防止此类错误的发生。

Answer 1

如果您通过其 id 选择一个元素，则不需要嵌套选择器 - id 必须每次都是唯一的。如果你有一个类根据它的父级有不同的样式，你必须使用这样一个嵌套选择器(但是，如果一个类在每种情况下都具有相同的样式，你也可以删除父级选择器)。

例子:

#product-box #product-photo { width: 200px }

与

相同

#product-photo { width: 200px }

你也可以为此使用一个类:

.photo { width: 200px }

但是:如果照片在某些情况下有不同的尺寸，你必须这样做:

#product-box .photo { width: 200px }
#another-box .photo { width: 150px }

或者，或者，定义一个“默认”和一个特殊情况:

.photo { width: 200px } // the default
#another-box .photo { width: 150px } // special size for photos inside #another-box

注意:我不知道如何在 sass 中执行此操作(我不知道 sass 是什么)，但我希望这对您有所帮助。 p>

注意 2: 在您的站点上有非常非常大的流量之前，您不应该担心这种对 css 文件大小的小影响 - 一切都可读并且更重要易于理解，否则如果您将来必须更改某些内容，您将陷入困境(另外，如果您不想尽可能地减小文件大小，为什么要使用这么长的 ID？为了打破它，不会是不是最好用#a #b #c #d...等等？)