在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-box之前有一个冗余#product-photo,因为#product-photo它本身可以唯一地识别元素.

结果,CSS文件可能变得臃肿.我想知道是否建议#product-photo在SASS文件中取消缩进,以便它不需要嵌套？

我想我们可以在.photo里面找一个班#product-box......这是真的吗？但在某些情况下,我们可能有2张或2 li内#product-box,因此使用一个类不能唯一地确定一个元素.如果我们使用jQuery,我们可以说$('#product-box li:eq(2)要获取任何元素,但如果有人在li不知道jQuery代码依赖它的情况下添加另一个元素,它可能会引入bug .有一个id意志防止这种错误发生.

Answer 1

如果你通过它的id选择一个元素,你不需要有一个嵌套的选择器 - 每次都必须使用id.如果你的类具有不同的样式,具体取决于它的父类,你必须使用这样的nestes选择器(但是,如果一个类在每种情况下具有相同的样式,你也可以删除父选择器).

例:

#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 是什么),但我希望无论如何这对你有所帮助.

注意2:你不应该担心这个对css文件大小的这种小影响,直到你真的,真的,你的网站上有很多流量 - 一切都是可读的和易于理解的更重要,否则你会陷入地狱如果你将来要改变一些东西(另外,如果你不想尽可能地减少你的文件大小,你为什么要使用这么长的ID？为了打破它,它不是最好的使用#a #b #c #d.. . 等等？)