前回、下記の内容を紹介しました！

もうSassはいらない？CSSネストで快適にスタイルを書く

今回は、実際にCSSネストを使ってみて感じたメリットとデメリットを改めてまとめてみます。

CSSネストのメリット

①コードの構造が見やすくなる

「.card」の中の h2、「ホバー時」といった関係性がひと目でわかります。

.card {
  padding: 1rem;
  & h2 {
   font-size: 1.2rem;
  }
  &:hover {
   background: #f5f5f5;
 }
}

②同じコンポーネントのスタイルをまとめやすい

1つのブロックやコンポーネント内で、関連するスタイルをまとめて書けます。

.header {
 & nav { ... }
 & .logo { ... }
 & .menu { ... }
}

いちいち 「.header nav」 や 「.header .logo」と書く必要がなくなるため、
重複を減らせます。

③クラス名の衝突を防ぎやすい

スコープが明確になるため、「.button」が他の場所と被るといった問題を防げます。

.card {
 .button { ... } /* card内限定のボタン */
}

CSSネストのデメリット

①ネストが深くなって読みづらい

Sassでも同じですが、ネストが3〜4階層を超えると「どの要素かわからない」状態になります。

.wrapper {
 .section {
  .card {
   .inner {
     span {
      color: red;
     }
    }
   }
  }
 }

②チーム開発ではスタイルの責任範囲が不明確になりがち

「どこまでネストしていいか？」の基準が人によって違うと、スタイルがバラつきやすいです。

チームでは「2階層まで」など、ルールを決めるのがいいでしょう。

CSSネストのメリット・デメリットまとめ

ネストは便利ですが、デメリットも理解し、ルールを明確に決めて慎重に使うことが大切です。