SASS nesting best practise? - css

Question

Is it mandatory to nest all child element to it's parent? Please take a look at my example code. I saw some articles, they warned to nest child elements only to 4 levels. But here I wrapped all childs to it's parent. Is it ok to code sass like this format?
<div class="col-md-3 left-side">
<div class="profile-info">
<img src="img/user.jpg" alt="">
<div class="info">
<p>Header</p>
<span>2 minutes ago</span>
</div>
</div>
<div class="ads">
<h4>Advertisements</h4>
<img src="img/ad1.jpg" alt="">
<p>Grab your book !!!</p>
<img src="img/ad2.jpg" alt="">
<p>Hurry up. Limited offers !!!</p>
<img src="img/ad3.jpg" alt="">
<p>Grab your book !!!</p>
<img src="img/ad4.jpg" alt="">
<p>Hurry up. Limited offers !!!</p>
</div>
</div>
.left-sidebar{
height: auto;
background-color: #fff;
.ads{
img{
width:100%;
}
h4{
margin-top:45px;
margin-top: 45px;
font-weight: 600;
}
p{
margin-top: 5px;
font-weight: 500;
margin-bottom: 22px;
}
}
.profile-info{
#include basic_style;
padding-top: 31px;
.info{
padding-top: 28px;
padding-left: 16px;
display: inline-block;
#media only screen and (max-width: 1200px){
padding-top: 20px;
padding-left: 0px;
text-align: center;
display: block;
}
}
img{
width: 100px;
height: 100px;
border-radius: 50%;
float: left;
#media only screen and (max-width: 440px){
width: 85px;
height: 85px;
}
#media only screen and (max-width: 1200px){
display: block;
margin: 0 auto;
float: none;
}
}
p{
#include post_title;
}
span{
#include sub_header;
}
}
}

Answer 1

The problem of this code is that you can't use .ads or .profile-info blocks in right sidebar or somewhere else. Your code is context depended.
To improve situation you can read about BEM (block element modificator).
In your case at first you should remove .left-sidebar selector. Second, tad selectors are not good, so add class names to your inner spans, images and paragraphs.
Your code will look like:
.left-sidebar {
height: auto;
background-color: #fff;
}
.ads {
.img {
width:100%;
}
.h4 { // .h4 is just an example, write some more meaningful name
margin-top:45px;
margin-top: 45px;
font-weight: 600;
}
.p {
margin-top: 5px;
font-weight: 500;
margin-bottom: 22px;
}
}
// styles for .profile-info
But this scss generates unnecessary second level selectors like .ads .img {}. You can follow the BEM methodology to write only first level selectors.
Scss:
.ads {
&__img {
width:100%;
}
&__h4 {
margin-top:45px;
margin-top: 45px;
font-weight: 600;
}
&__p {
margin-top: 5px;
font-weight: 500;
margin-bottom: 22px;
}
}
Css output:
.ads__img {
width: 100%;
}
.ads__h4 {
margin-top: 45px;
margin-top: 45px;
font-weight: 600;
}
.ads__p {
margin-top: 5px;
font-weight: 500;
margin-bottom: 22px;
}
Summary
Don't nest all child element to it's parent. Write more reusable and context-independent code.