如何在CSS / SASS中设置嵌套ID元素的样式

Question

使用ID为嵌套元素设置样式的正确方法是什么？

example.html的

<div id="content">
    <ul id="list">
        <li>Just a minimal example</li>
    </ul>
</div>

style.sass

#content
    background: white;

    #list
        list-style-type: none;
        padding: 10px 15px;

有了它，更容易阅读SASS文件，因为很明显， #list是#content的孩子。

但我认为浏览器必须检查两件事，不是吗？ 首先找到#content ，然后找到#list元素。

我应该使用吗？

#content
    background: white;

#list
    list-style-type: none;
    padding: 10px 15px;

Answer 1

我建议不要在获得性能时嵌套id选择器。 当然这对于小CSS文件来说无关紧要。

一个很好用的方法来“显示”CSS输出中的类之间的关系，就是缩进像这样的子类，但是CSS也经常被缩小而不是人类友好，所以这一切也取决于谁会读它。

#content {
  background: white;
}
  #list {
    list-style-type: none;
    padding: 10px 15px;
  }

Answer 2

两者都很好。 间距对css / sass / less / scss代码没有影响。