SASS 중첩 우수 사례?

모든 하위 요소를 상위 요소에 중첩하는 것이 필수입니까? 제 예제 코드를 살펴보십시오. 나는 몇몇 기사를 보았고, 어린이 요소를 4 단계로만 중첩 시키라고 경고했다. 하지만 여기에 나는 모든 아이를 그것의 부모로 감쌌다. 이 형식과 같은 sass를 코딩해도 괜찮습니까?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; 
     } 
    } 
}

출처

2016-09-29 Janath

이 코드의 문제는 당신이 바로 사이드 바 또는 다른 곳에서 .ads 또는 .profile-info 블록을 사용할 수 없다는 것입니다. 귀하의 코드는 상황에 따라 다릅니다.

상황을 개선하기 위해 BEM (블록 요소 수정 자)에 대해 읽을 수 있습니다.

귀하의 경우 먼저 .left-sidebar 선택기를 제거해야합니다. 둘째, 십일 선택기가 좋지 않으므로 내부 이름, 이미지 및 단락에 클래스 이름을 추가하십시오.

코드는 다음과 같이 표시됩니다

.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

그러나이하는 SCS는 .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; 
}

요약

가 그 부모에 중첩하지 모든 자식 요소를 수행합니다. 재사용 가능하고 문맥 독립적 인 코드를 작성하십시오.

출처

2016-09-29 10:38:50 3rdthemagical

SASS 중첩 우수 사례?

답변

관련 문제