How to style nested ID-elements in CSS/SASS

Question

What is the correct way to style a nested element with an 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;

With this it is easier to read the SASS file, as it is obvious, that #list is a child of #content.

But I think the browser has to check for two things, isn't it? First find the #content and then find the #list element.

So should I use?

#content
    background: white;

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

Answer 1

I recommend to not nest id selectors as you gain performance. Of course this will be of no matter on small CSS files.

A well used way to "show" the relation between to classes in the CSS output, is to indent child classes like this, but also often the CSS is minified and not human friendly, so it all kind of also depends on who's gonna read it.

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