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;
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;
}
Both are fine. Spacing have no effects in css/sass/less/scss code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.