CSS 入れ子（ネスト）の表記の良し悪し

CSSの入れ子の記述の仕方のサンプルです。

CSSはSass(SCSS)を使わなくても親子の階層で記述することができるようになりました。

その良し悪しについてサンプルをもとに考えてみましょう。

コードを見比べてみます。

まずは同じ二つのHTMLを書きます。

<div class="demo_1">
    <div class="demo_11">
    <span>通常</span>のCSS適応のサンプル
    </div>
</div>

<div class="demo_2">
    <div class="demo_21">
    <span>ネスト（入れ子）</span>のCSS適応のサンプル
    </div>
</div>

CSSは後でみるとして先にその実行結果はこちら

通常のCSS適応のサンプル

ネスト（入れ子）のCSS適応のサンプル

demo_1の青い方のCSSはこちら

<style>
    .demo_1 {
        color: white;
        margin: 10px;
    }
    .demo_1 .demo_11 {
        background-color: blue;
        padding: 10px;
    }
    .demo_11 span {
        font-size: 1.5em;
        font-weight: bold;
        padding: 0 10px;
    }
</style>

demo_2の赤い方のCSSはこちら

<style>
    .demo_2{
        color: white;
        margin: 10px;

        .demo_21 {
            background-color: red;
            padding: 10px;

            span {
                font-size: 1.5em;
                padding: 0 10px;
            }
        }
    }
</style>

demo_2の方がスマートで、後発で新しく導入された書き方なので綺麗見えます。