SASS - наилучшая практика вложения?

Question

Обязательно ли гнездовать все дочерние элементы родителям? Пожалуйста, взгляните на мой примерный код. Я видел несколько статей, они предупреждали, что они устанавливают дочерние элементы только на 4 уровня. Но здесь я завернул всех ребят в родителя. Можно ли кодировать sass, как этот формат?

<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

Проблема этого кода является то, что вы не можете использовать .ads или .profile-info блоков в правой боковой панели или где-нибудь еще. Ваш код зависит от контекста.

Для улучшения ситуации вы можете прочитать о BEM (модификатор элемента блока).

В вашем случае сначала вы должны удалить .left-sidebar селектор. Во-вторых, селектор tad не очень хорош, поэтому добавьте имена классов в свои внутренние промежутки, изображения и абзацы.

Ваш код будет выглядеть следующим образом:

.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 

Но это порождает ненужные СКС селекторы второго уровня, как .ads .img {}. Вы можете следовать методологии BEM для записи только селекторов первого уровня.

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 выход:

.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; 
} 

---

Резюме

не гнездятся все дочерний элемент для его родителей. Напиши более многоразовый и контекстно-независимый код.