SCSS 구조 개선

나쁜 예

다음과 같이 구성된 예제 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>