scssで＠mixinを使うのと、htmlでclass指定する何が違う

Question

htmlで複数クラスを指定してCSSでまとめてプロパティを適用するのと、scssの＠mixinを使って複数のセレクタにプロパティを適用するのとでどっちの方が望ましいとかありますか？あればその理由を教えてください。

Answer 1

いま思いつくのは以下です。

関わるメンバーのレベル (mixinが理解できるか、慣れているか)

• 全員未経験なのにmixinを多用すると、おそらく破綻します。少ない箇所から始めて、破綻していないことを確認して増やしていくほうがいいと思います。

どのくらい保守し続けなければならないか (作って終わり、なのか2〜3年保守するのか)

• 保守し続けるのであれば、様子を見ながらmixin化してもいいかもしれません。
• イベントページなど、スピードが求められデザイン変更もあり得るようなシチュエーションでは、多用は避けたほうがいいと思います。
• mixinを多用しすぎるとクラス名がどんどん増えていき、保守する際にHTMLだけ変更すればOKだったシチュエーションで、毎回CSSも更新する必要が生じることもあり、逆に工数が増えることもあると思います。

複数のセレクタで、繰り返している記述のボリューム

• 5行くらいの記述が20箇所で繰り返していたらmixinにすべきだと思いますが、2行の記述が3箇所で繰り返しているだけだったらmixin化しなくてもいいのではないか、と思います。

---

SCSSの変数を使っていなくて、mixinに着手しようとしているなら、まずは変数から使うことを覚えたほうがいいともいます。

font-familyやline-height、色など、レスポンシブ時に変化しないものは変数化すると便利です。

逆に余白などレスポンシブで変化してしまうものは破綻しやすいので注意してください。