Sassの運用を楽にするには、Sassの機能を使いすぎるな

Sassは便利ですが、いくら便利でもSass機能を無計画に濫用するとSassの運用がキツくなります。フォトショでドロップシャドウを覚えたばかりの人が濫用しまくった後のように、悲惨な結果が待ってます。

ネスト深すぎ&広すぎはやめよう。

.hoge {
  p {}
  .fuge {
    p {}
    a {}
    div {
      p {}
      a {}
    }
  }
  .fuga {
  }
  ...以後数百行
}

手を入れているクラスの親がどれなのか分かりにくくなる。

クラスの中にクラスをネストし始めたら要注意。
ネストは2個まで、またはクラス内にはクラスは絶対ネストさせないなどルールを決めてしまった方がいいです。

extendはやめよう

.hoge {}
.fuga {
  @extend .hoge;
}
.mugu {
  @extend .fuga;
}
.moge {
  @extend .hoge;
}

extendは実際どんなスタイルになるか分かりにくいので、結局宣言元のクラスを見にいくことが多く手間がかかります。

また出力されたCSSのセレクタがすごく長くなることもあり、CSSファイルだけで読み解くことが難しくなります。

extendを使いはじめるとsass管理の難度が一気に跳ね上がるので、sassを複数人で共有する現場ではいっそextend禁止でもいいです。分かりやすいmixinを作る程度までにしましょう。

変数使うなら変数に徹しろ

$width-100 : 100px;
$color-red : #f00;
.hoge {
  width: 100px;
  color: #f00;
}

複数人でSassを共有すると変数の利用がおろそかになりやすいです。

  • 直感的で分かりやすい変数名にする
  • 変数以外に固定値やカラーコードは絶対使わない
  • lighten,darkenなどを活用する

運用ルールはシンプルにしよう

上記の内容でルールの例も書きましたが、シンプルで誰でも守りやすいルールにしましょう。

忘れようのないほど簡単で少ないルールでないと浸透しにくく、資料が要るほど細かく複雑なルールは生産性を下げるうえ、資料の更新の問題がすぐに出て形骸化してしまうので。

またSassの機能を使い過ぎるとSassを知らない人、覚えたての人にはブラックボックス化します。

深すぎないネスト構造や最低限の機能だけに絞れば、CSSだけ分かる人でもすぐ理解できるので、Sassの機能はほどほどに使うのがオススメです。