SCSS 구조 개선

3544 단어


나쁜 예



다음과 같이 구성된 예제 SCSS:

.widget {
    background-color: red;
    .widget-body {
        background-color: black;
        .widget-link-block {
            background-color: yellow;
            .widget-link-block-menu {
                background-color: green;
            }
        }
    }
}

CSS로 컴파일:

.widget {
    background-color: red;
}

.widget .widget-body {
    background-color: black;
}

.widget .widget-body .widget-link-block {
    background-color: yellow;
}

.widget .widget-body .widget-link-block .widget-link-block-menu {
    background-color: green;
}

2가지 단점이 있습니다.
  • '위젯'과 같은 키워드를 반복하고 있습니다
  • .
  • 컴파일된 CSS는 HTML 구조에 의존합니다. 즉, 다음 HTML에서만 작동합니다.

  • <div class='widget'>
      <div class='widget-body'>
        <div class='widget-link-block'>
          <div class='widget-link-block-menu'>
    
          </div>
        </div>
      </div>
    </div>
    

    계층 구조를 위반하면 작동이 중지됩니다.

    <div class='widget-body'>
    <div>
    

    작동하지 않습니다

    <div class='widget'>
      <div class='widget-body'>
        <div class='widget-link-block-menu'>
          <div class='widget-link-block'>
    
          </div>
        </div>
      </div>
    </div>
    

    작동하지 않습니다

    제안된 방법



    SCSS를 올바르게 사용하고 팔로우BEM

    위의 SCSS 예는 다음과 같이 수정할 수 있습니다.

    .widget {
        background-color: red;
        &-body {
            background-color: black;
        }
        &__link {
            &__block {
                background-color: yellow;
                &__menu {
                    background-color: green;
                }
            }
        }
    }
    

    CSS로 컴파일됩니다.

    .widget {
        background-color: red;
    }
    
    .widget-body {
        background-color: black;
    }
    
    .widget__link__block {
        background-color: yellow;
    }
    
    .widget__link__block__menu {
        background-color: green;
    }
    

    보시다시피 컴파일된 CSS는 더 간결하고 덜 복잡합니다. SCSS를 작성할 때 더 이상 '.widget' 작성을 반복하지 않습니다. 더 중요한 것은 컴파일된 CSS가 더 이상 HTML 구조에 의존하지 않고 다음과 같이 사용할 수 있다는 것입니다.

    <div class='widget'>
      <div class='widget-body'>
        <div class='widget__link__block'>
          <div class='widget__link__block__menu'>
    
          </div>
        </div>
      </div>
    </div>
    

    또는 다른 순서로:

    <div class='widget'>
      <div class='widget-body'>
        <div class='widget__link__block__menu'>
          <div class='widget__link__block'>
    
          </div>
        </div>
      </div>
    </div>
    

    또는 개별적으로:

    <div class='widget-body'>
    </div>
    

    좋은 웹페이지 즐겨찾기