由sass编译的css选择器对浏览器有害

SCSS代码：

#主{
宽度：97%；
p、 div{
字号：2em；
a{font-weight:bold；}
}
前{字体大小：3em；}
}

汇编为：

#主{
宽度：97%；
}
#主p，#主分区{
字号：2em；
}
#主p a，#主分区a{
字体大小：粗体；
}
#主要预处理{
字号：3em；
}

---

浏览器不喜欢大量嵌套选择器和重复父选择器。那么，哪种方法是编写SCS的最佳方法呢？

在我看来，如果可能的话，最好的方法是去掉所有这些嵌套。如果可以，只需将类添加到这些

p

、

div

、

a

等中，然后基于类创建CSS规则，而无需嵌套

---

一开始可能有点冗长，但您很快就会注意到这种方法是多么的简单和强大。

这个问题可能会因为基于意见的答案而受到质疑，但我觉得它很有趣。虽然浏览器可能“不喜欢”大量嵌套的选择器和重复的父级-这不是解释CSS的最有效的方式-CSS通常非常快，所以在我认为您注意到一个可察觉的问题之前，您需要有一组非常大的规则。Sass是一种可维护性折衷方案，只需花费一分钟的性能成本。我想说的是，避免不必要的嵌套——它不需要镜像您的标记结构——您应该不会有问题。不过，这只是我的意见。