実際Sassを使うときの注意点

Sass自体はcssの管理と記述を効率よくできるものですが、簡単なデザインや
よほど凝ったものでない限り通常のCSSで十分だと思います。


特に全体で5ページ程度のサイトぐらいでしたらSassを絶対に使わなければならない必要性は
あまりないと思います。


情報量、ページ数が多い。階層が深いサイト、デザイン重視のサイトなどはSassでの制作経験を培った方が
後々楽かもしれません。

まずは、実際サイトを制作するに当たりいくつかの注意点と覚え書きを綴ります。

深すぎるネストは禁物

Sassを覚えてとにかくやるのがネストを深く掘り下げすぎること。

sass

body{
	background: #000000;
	#container{
       background: #33333;
	   header{
		   background: #222222;
		    }
		nav{
			background: #66666;
			}
		section.content{
				section.mainContent{
				background: #999999;
				article{
				         float: left;
						 }
				}
				section.subBar{
				background: #AAABBB;
				}
			}
		footer{
			ackground: #222222;
	        }
	   }
	}

css(コンパイル後)

body {
  background: #000000;
}
body #container {
  background: #33333;
}
body #container header {
  background: #222222;
}
body #container nav {
  background: #66666;
}
body #container section.content section.mainContent {
  background: #999999;
}
body #container section.content section.mainContent article {
  float: left;
}
body #container section.content section.subBar {
  background: #AAABBB;
}
body #container footer {
  ackground: #222222;
}

このような書き方をする人はまずいないと思いますが、サイトの各パーツのセレクタのネストを深く書いていくと
似たようなSassコードになりがちです。
そうなるとインデントが多くなり可読性がガタ落ちになります。

また、CSSの方にもネストの乱発による弊害があります。
コンパイル後のCSSコードを見てお気づきでしょうが、セレクタが長文になっています。
結果的にCSSファイルが肥大化してしまいパフォーマンスが落ちてしまいます。


なぜパフォーマンスが落ちるかというとプラウザ側はCSSのセレクタを右（子、孫セレクタ)から左(親セレクタ）へと判別していきます。

つまり
"body #container section.content section.mainContent article "
といった風にネストを深くしすぎて親から末端の子・孫まで書いた長いセレクタと
.mainContent article
最小限で必要な部分だけを記述したセレクタでは圧倒的に短いセレクタの方が読み込み速度が速いのである。

ではネストはどう扱うか？

このようにネストはやり過ぎると楽できるどころか色々な問題が発生します。
だからといって使わないのは勿体ないので、可読性の良さとサイトの構成を踏まえた上で
ネストの階層と適したルールのガイドラインを設ける必要があります。