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

Question

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

示例.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 代码中没有影响。