🛠️
CSSの定義方法案：セレクタとmixinによる定義方法の使い分け
１．概要
- CSSを作成する上での観点のメモ。
- 設計論ではあまり言及されていない部分をプログラマー視点で考察。
（１）前提条件
- SASSを利用してCSSを作成する。（2021年現在では、Dart-Sass+SCSSが多い）
（２）方針
- DRY,KISSの原則に基づく。
- 無駄な文字列を使わず、命名をできるだけ単純にする。（冗長化させない）
２．スタイルの定義方法の分類
スタイルの定義の方法として、セレクタとmixinによる定義の２つの形式に分けられる。
関数は、数値計算等に利用し、定義には使用しない。
（１）セレクタによる定義
- HTML要素、id、classなどを定めて、それに対してスタイルを定義する。
- CSSとしてユーザーのブラウザに送信される。（定義と実行を伴う）
（２）mixinによる定義
- 独自の名前によりスタイルを定義。
- 複数の定義をまとめるショートカットの役割がある。
- CSSとして直接は生成されず、ブラウザにも送信されない。（定義のみで実行は伴わない）
- 汎用的なスタイルの定義はmixinでショートカットを作成し、セレクタで使う。
- 実際にブラウザでは利用されないため、予期しない干渉を防ぐことができる。
３．定義方法のメリット・デメリット
セレクタ
- セレクタでの定義は、画面上に影響します。広域的に利用することで、CSSの定義数を減らすことができます。
- 上記は、無思慮に多数の定義をつくることで予期しない影響を及ぼします。
- セレクタ名の工夫やソースの配置を考え、できるだけ最小限の数で定義することで問題を減らすことができます。
mixin
- 画面上に影響しないので、汎用的で些末な定義はmixinでした方が予期しない影響を抑えることができます。
- 一方、mixinは置換になるので、CSSのサイズが増えてしまうことがあります。
- セレクタの定義を最小限にしつつ、その中で呼び出すことにより、結果的に、トータルでは少ないコード数になります。
４．定義方法の使い所
セレクタ
- 標準の定義方法やmixinなどの定義を複数組み合わせて、画面上の部品に対して定義をする。
_box.scss
@use "config" as c;
.g-box {
border: solid 1px map-get(c.$color-set, "box-line-gray");
}
mixin
- 画面上の部品ではなく、汎用的で小さい範囲のものを定義する。
- 数行にわたるものを１行で呼び出せるようにする。
- cssの標準ではわかりにくものに別名を与えてわかりやすくする。
_magin.scss
@mixin h-center-margin {
margin-left: auto;
margin-righ: auto;
}
@mixin v-center-margin {
margin-top: auto;
margin-bottom: auto;
}
５．最後に
セレクタとmixinをうまく使い分けることで、予期しない影響を省きつつ、かつ、ビルドされたCSSのコードサイズを抑えることができると思います。
Discussion