Sassの機能でネストが最初に紹介されるけどあまり使わない方が良いと思う

はじめに

Sassの紹介って大抵最初の方に「セレクターをネストして書けるので見通しが良くなる！コード量が減る！」といった記述があるような気がします。
ですが、自分はネストして書かない方が良いと思っているため、理由とともに記事にしました。

この記事で分かること

• クラス名を&でつないでネストして書くデメリット
  • 検索しづらい
• タグやクラス名をネストして書くデメリット
  • トランスパイルされた後の名前が分かりづらい
  • 詳細度が上がる

なお、プロパティのネストについてはこの記事では語りません。

クラス名を&でつないでネストして書くデメリット

• 検索しづらい

シンプルながら、この点が大きなデメリットだと感じています。

説明の分かりやすさを重視して、以下のルールでコーディングをしている設定とします。

1. MindBEMdingの則ってクラス名をつけている
2. Block要素をルートにして、ElementやModifierは&でつないでネストする
3. ElementやModifierの数に制限は設けない

検索しづらい

以下のようなコードがあったとします。

<div class="card">
  <img class="card__image" src="./image.jpg" alt=""/>
  <div class="card__body">
    <p class="card__body__title">カードのタイトル</p>
    <p class="card__body__description">カードの内容の説明文。</p>
  </div>
</div>

今回はカードのタイトルのスタイルを変えたくなりました。
そのため.card__body__titleで検索してみたのですが、どこにも見当たりません。

何故か？scssファイルではこのように記述されていたからです。

.card {
  // なにかしらのスタイル
  &__image {
    // なにかしらのスタイル
  }
  &__body {
    // なにかしらのスタイル
    &__title {
      // なにかしらのスタイル
    }
    &__description {
      // なにかしらのスタイル
    }
  }
}

これじゃあヒットしませんよね。

かといって.cardで検索するとそれはそれで大変です。
やたらめったら検索に引っかかってしまうのが想像つくことでしょう。

地味ですが結構なストレスを感じます。

タグやクラス名をネストして書くデメリット

• トランスパイルされた後の名前が分かりづらい
• 詳細度が上がる

上記2つをデメリットとして挙げます。

トランスパイルされた後の名前が分かりづらい

ネストが1回か2回ならともかく、かなり深くネストされたコードも見たことがあります。
また、&があったりなかったりが混ざると読み解くのがしんどくなります。

まずは以下を見てください。

some.scss

.block {
  &__element1 {
    element2 {
        &--modifier {
            color: blue;
        }
    }
  }
}

これがトランスパイルされると、こうです。

some.css

.block__element1 element2--modifier {
  color: blue;
}

読めるには読めるんですが、不必要に脳みそを稼働をさせている気がします。

詳細度が上がる

SassのTips記事みたいなタイトルなのにCSS設計の話に片足を突っ込んでしまったかもしれません。

そもそもクラスにせよタグにせよ、ネストして書くと詳細度が上がります。
CSSが何故かおかしくなる原因のうち8割は「楽して書こうとして詳細度を上げてしまい、他の要素に影響を及ぼしていた。」です。 ¹

詳細度は上げないに越したことはありません。
たしかにネストして書けば今日のタイプ数は減りますが、来月修正する際のタイプ数は増えます。

まとめ

• クラス名を&でつないでネストすると検索しづらくなり、後から大変になりがち
• タグやクラス名をネストすると、トランスパイル結果が見えづらくなるわ詳細度が上がるわで、後から大変になりがち

1. n=1、私調べです。 ↩