由sass编译的css选择器对浏览器不利

Question

SCSS代码：

#main {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

编译为：

#main {
    width: 97%; 
}
#main p, #main div {
    font-size: 2em; 
}
#main p a, #main div a {
    font-weight: bold; 
}
#main pre {
    font-size: 3em;
}

浏览器不喜欢很多嵌套选择器和父选择器的重复。那么，这是编写SCSS的最佳方式吗？

Answer 1

在我看来，最好的方法是尽可能摆脱所有这些嵌套。如果可以，只需向这些p，div，a等添加类，然后根据类创建CSS规则，而不进行嵌套。

一开始可能看起来有点冗长，但你会很快注意到这种方法更容易和更强大。