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

Question

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

example.html

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

风格

#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;
  }