結局Sassのネストってどこで切ればいいの問題

きっかけ

SCSSファイル内でのネストが実際の階層に忠実すぎるために深くなりすぎてしまったことがあり、改めて「適切なネストの構造とは何か？」について考えるようになりました。

本記事の目的

Sass¹の基本記法のひとつであるネスト（入れ子）に関しては、次のようなデメリットが挙げられています。

　文字列検索がしにくい
　詳細度があがるため上書きしにくい

これに関しては、分かりやすくまとめられた記事があるため、そちらもご覧ください。

一方で、ネストには次のようなメリットもあります。

　階層関係が分かりやすい
　記述量を減らすことにより冗長なコードにならない

これらを踏まえ、

「視覚的に見やすく」かつ「変更や上書きにも対応しやすい」ネストの構造とは何か？

を考えてみました。

結論

親要素のブロック ＋ １階層を基本として、

① 疑似要素（:first-childなど）を追加するとき
② 同階層にclassを追加するとき

のみネストするのがいいのではないか、という結論に至りました。

コード例

サンプルHTML

nest_sample.html

<div class="main-container">
    <ul class="main-container__list">
        <li class="item first">リスト項目1</li>
        <li class="item first selected">リスト項目1（複数クラス指定ver.）</li>
        <li class="item second">リスト項目2</li>
        <li class="item third">リスト項目3</li>
    </ul>
</div>

サンプルSCSS:before

nest_sample.scss

.main-container { 
  &__list { 
    padding: 0;
    
    .item { 
      margin-top: 10px;
      background-color: light-gray;

      &.first {
        background-color: red;

        &.selected {
          background-color: blue;
        }
      }

      &.second {
        background-color: green;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}

ファイル内のネストは、実際のHTML構造に合わせた階層になっています。
ただ、このままこの書き方を続けるとネストが段々深くなっていき、後からの変更に弱い構造になってしまうのが分かります。
そこで「プロパティの位置が視覚的に分かりやすく」「変更や上書きがしやすい」ネストになるよう、書き方を変えてみました。

サンプルSCSS:after

nest_sample.scss

.main-container {
  .main-container__list { //文字検索しやすいようクラス名を明記
    padding: 0;
  }

  .item {
    margin-top: 10px;
    background-color: light-gray;
  }

  .first {
    background-color: red;

    &.selected {
      background-color: blue; // 同階層に2つのクラスを指定している場合はネスト
    }
  }

  .second {
    background-color: green;

    &:hover {
      cursor: pointer; // 疑似要素を指定している場合はネスト
    }
  }
}

変更点

できるだけネストを浅くするよう、原則として親ブロック ＋ 1階層に書き直しました。

それに合わせ、以下のものを切り離しました。

• 子階層の全てに適用されるプロパティを有した「.item」などの親要素のclass
• ネストの子階層にあった、直接名前で指定できる「.first」などのclass

また、以下のものは記述の重複を避けるためネストさせています。

• 「.first.selected」などの同階層に追加されることが必要な要素
• 「:hover」などの疑似要素

このように、ネストを深くしすぎないことで割とすっきりした書き方になりつつ、変更に堪えやすいプロパティ指定になっているのではないかと思います。

まとめ

プロパティ把握のしにくさなどから反対される記事が多いネストですが、個人的には適切に設計すれば見やすさ・変更のしやすさの両立も可能なのではないかな、と思いこの記事を書きました。

本記事での提案はあくまでローカルルールのようなものなので、特にCSS設計に関して定められたルールがない場合の参考にしていただければと思います。もっと書きやすいやり方があるよ！などのご意見がありましたらぜひコメント欄でお伝えください。内容に関する質問・ご指摘も大歓迎です。

参考記事

「これからはcssはSassで書こう。」（Qiita記事）
「【CSS設計】ゼロからわかるBEM超入門」（Zenn記事）
「Sassの機能でネストが最初に紹介されるけどあまり使わない方が良いと思う」（Qiita記事）
「Sass Basics Nesting」(Sass公式ホームページ)

1. CSSの拡張言語のこと。「SASS記法」と「SCSS記法」の２種類があり、本記事では「SCSS記法」を採用する。 ↩