如何在CSS / SASS

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文件如何，都是如此。

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

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

Answer 2

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