【Sass】ネストを使わない方がよい3つの理由

今日のウェブ制作において必須とも言えるCSSメタ言語のSass。

ご存知の通りSassは多くの機能を持っています。

その中に「ネスト」という有名な機能があります。

はじめてSassを学ぶ方がに恐らく最初の方に習うと思います。

一見この機能、すごい便利な機能だと思いますが実は使わない方が良い機能の一つと筆者は考えます。

その理由を今回はお伝えしていきます。

使わない方がいいですが機能として知っておく必要はあります。実務で使われている可能性があるのでその時に対処できなくなってしまいます。

使わない方が良い理由

• 入れ子になってしまう
• 可読性の低下 に繋がる

大きな理由は上記の通りです。

次の項目から一つずつ詳しくみていきましょう。

入れ子になってしまう

入れ子とは

.box .boxItem{
  color:red;
}

みたいな感じです。

入れ子にしてしまうと詳細度が上がってしまいます。

詳細度は基本的に上げない方が良いです。

同一レベルの詳細度で書くことで更新できないということがなくなります。

cssというのは誰でも簡単に書くことが出来る故、破綻しやすい不完全な言語です。

ルールを設けることで破綻しにくい言語にすることが出来ます。

可読性の低下に繋がる

入れ子にすることで可読性の低下に繋がります。

.main{
 font-size:1.6rem;
 background:#fff;
  .box{
    font-size:2rem;
    letter-spacing: 1px;
    .boxItem{
    margin:3.2rem;
    padding-bottom:1.6rem;
    border: solid 1px #333;
      .fontbox{
        margin:1.6rem;
        .fontPatern{
        color:red;
        }
      }
    }
  }
}

こんなコードみたくないですね笑

このようにネストをどこまでも深くしてしまうと、とても読みにくいコードになってしまいます。

どうしても使いたいのであればネストの階層は3階層までなどの制限をつけていく必要性があります。

まとめ

ネストは覚えやすく故使っている方が多く感じます。

ですが、あまり推奨する書き方ではありません。

ということで今回はネストを推奨しない理由を書いてみました。