SCSS構造を改善する

3343 ワード
テキストリンク

悪い例


以下のように構造化された例を示します:
.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を書くとき、我々はもはや書くことを繰り返しません.ウィジェット'.さらに重要なことに、コンパイルされた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>
    go解析Webページjsonデータの取得
    [コアJavaScript]3this