CSSネスト（入れ子）の書き方

2025-07-16

CSSの新しい書き方として、CSSをネストして書く方法があります。特定箇所のスタイルをひとつにまとめて書けるため、コードの見通しがよくなり、後から修正する際に分かりやすくなったと個人的には思うようになりました。ただ、調子に乗ってネストしまくっているとそれはそれで問題があるので、適度なネストを心がけた方がいいですね。

CSS 入れ子の使用 - CSS: カスケーディングスタイルシート | MDN

CSS 入れ子モジュールにより、スタイルシートをより読みやすく、よりモジュール化しやすく、より保守しやすく書くことができます。常にセレクターを繰り返すわけではないので、ファイルサイズも縮小することができます。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

CSS 入れ子の使用 - CSS: カスケーディングスタイルシート | MDNのサムネイル

具体的な書き方

早速その書き方ですが、実際のコード例を示したいと思います。まずはHTMLから。

<article class="post active">
    <h1 class="post_title"><a href="sample.html">投稿タイトル</a></h1>
    <time class="post_date" datetime="2025-07-14">2025.7.14</time>
    <p class="post_description">ここに説明文が表示されます。本日は晴天なり。</p>
</article>

よくあるブログ一覧のマークアップです。article要素以下にh1要素、time要素、p要素が並びます。これらのHTMLにスタイルを当てていくんですが、通常であれば以下のようになると思います。

.post {
    margin-block-start: 10svh;
}

.post.active {
    cursor: pointer;
}

.post_title {
    color: var(--color-dark);
    font-size: var(--font-size-md);
    line-height: 1.375;
}

.post a:any-link {
    color: var(--color-link-base);
}

@media (any-hover: hover) {
    .post a:hover {
        color: var(--color-link-hover);
    }
}

.post_date {
    color: var(--color-gray);
    font-size: var(--font-size-sm);
}

.post_description {
    margin-block-start: var(--space-block-lg);
    font-size: var(--color-pale-gray);
}

例えばこんな感じですね。まぁあくまでも一例なのでプロパティ値は無視してください。このコードをCSSネストを使って書き直すと以下のようになります。

.post {
    margin-block-start: 10svh;
    &.active {
        cursor: pointer;
    }
    .post_title {
        color: var(--color-dark);
        font-size: var(--font-size-md);
        line-height: 1.375;
        & a {
            &:any-link {
                color: var(--color-link-base);
            }
            @media (any-hover: hover) {
                &:hover {
                    color: var(--color-link-hover);
                }
            }
        }
    }
    .post_date {
        color: var(--color-gray);
        font-size: var(--font-size-sm);
    }
    .post_description {
        margin-block-start: var(--space-block-lg);
        font-size: var(--color-pale-gray);
    }
}

どうでしょうか。初めて見る方にとっては通常の書き方に比べると見にくくなったかもしれません。私がそうでした。全く意味が分かりませんでしたから。でも、今はこの書き方が一番しっくりきています。

細かい説明については、先ほどの CSS 入れ子の使用 – CSS: カスケーディングスタイルシート | MDN を見ていただくとして、個人的に感じたメリットとデメリットを説明したいと思います。

メリット

コードの見通しがよくなった。
特定の要素以下のスタイルをまとめることができるので、修正が楽になった。
何かプロっぽい。笑

コードの見通しがよくなった

ネストした場合、関連する子孫要素がネストされていますので、親要素と子孫要素の関係性が一目で分かるようになり、コードの見通しがよくなりました。

特定の要素以下のスタイルをまとめられる

以前までの書き方は、スタイル単体で見た時には問題ないのですが、コード量が増えた上で後から修正しようと思った時に、一つ一つを確認して辿っていかないと該当箇所になかなか辿り着けませんでした。しかし、ネストしておくと特定要素に関連するスタイルが大きな塊としてパッと見えますので、サッと該当箇所を辿ることができるようになりました。まぁ検索しろって話ですけどね…

何かプロっぽい

素人なんで玄人のプロの方に常に強い憧れがあります。スマートなスタイルを書いている人の真似をすぐしたくなります。私は趣味でやっていますので全然楽しいんですが、これを仕事としてやっている方は本当に尊敬します。

デメリット

デメリットは、ネストが深くなりすぎると却って見にくくなるという点でしょうか。極端な例で言うと、htmlから始めると、サイト全体のスタイルを余す所なくネストすることが可能です、多分。さすがにここまでする人はいないでしょうけど、こうなると逆に見にくくなりメンテナンスも大変になります。

もう一つはCSSの詳細度の問題があります。過度なネストは詳細度を上げることになりますので、あとから上書きするのが大変、なんてことにもなりかねません。何事もほどほどがいいってことですね。

詳細度 - CSS: カスケーディングスタイルシート | MDN

詳細度 (Specificity) は、ある要素に最も関連性の高い CSS 宣言を決定するためにブラウザーが使用するアルゴリズムで、これによって、その要素に使用するプロパティ値が決定されます。詳細度のアルゴリズムは、CSS セレクターの重みを計算し、競合する CSS 宣言の中からどのルールを要素に適用するかを決定します。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_cascade/Specificity

最後に

ネストするにも細かい規定というか決まり事があるので、しっかり理解していないと思ってたのと違うとかなぜかスタイルが当たらないとかの問題にぶつかることがあると思います…はい、私がそうでした。特に、&を入れる、&で繋ぐとかのルールは絶対守らないとスタイルが反映されませんのでご注意ください。詳細はMDNのサイトや仕様書を確認するようお願いいたします。