如何在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代碼沒有影響。