Zenn
💪

CSSのマジックナンバーをCSS Variablesで説明する

2022/02/24に公開
CSS
tech

腹筋やってますか？　デザイナーの@8845musignです。

プログラミングにおいて、数字をそのまま用いることはマジックナンバーと呼ばれ忌避されます。プリミティブな値をそのまま扱うと意図が伝わりにくいためです。CSSにおいては数字の使用は一般的で、結果として意図の伝わりにくいコードが出来上がってしまうことがあります。

ですが、CSSではCSS Variablesを用いることで値に名前をつけることができます。これを使うことでいくつかのマジックナンバーを隠蔽し、読みやすく意図の伝わりやすいコードを記述できます。

具体例

実際にCSS Variablesを利用したコードをご覧ください。

.Member {
  --member-height: 32px;
  position: relative;
  height: var(--member-height);
}

.Member__status {
  --adjust-y: 2px;
  position: absolute;
  top: calc(var(--member-height) + var(--adjust-y));
}

.Member__statusの位置が.Memberの高さへ依存していることは明白です。また、--member-height へ --adjust-y が加算されていますが、これはただの調整（adjust）であることがわかります。

全く同じレイアウトを、CSS Variablesを用いずに記述したらどうなるでしょうか。

.Member {
  position: relative;
  height: 32px;
}

.Member__status {
  position: absolute;
  top: 34px;
}

topに指定された値の意図を想像することがやや難しくなりました。

  • 34pxは.Memberの高さから来ているかもしれないが、2px増ていることで確証はない
  • 2pxはどのような理由で追加されているわからない

この例は単純な例のため、そこまで労せず意図を読み解くことができるかもしれません。しかし、calc(--var(--header-height) + var(--body-height) + var(--footer-height))と表現できるところを、149pxと数値を使って表現されていたらどうでしょう。149pxが意味することを読み解くのに、時間がかかるのではないでしょうか。

まとめ

CSS Variablesはスタイルの一貫性の担保や、動的なスタイリングの変更だけでなく、マジックナンバーへの名付けのためにも使用できます。
フォントサイズや色などのデザイン要素を、デザイントークンとしてCSS Variablesで表現することもあります。これは値の共通化を目的としているだけでなく、「名前をつける」という素朴な営みでもあります。

全てに名前をつけることは非常にコストがかかります。しかし複雑に思えるレイアウトでは、CSS Variablesによる命名が有効かもしれません。

株式会社イエソドはエンジニアを募集しています

https://herp.careers/v1/yesodco/9SKtd3pNgxfO

https://herp.careers/v1/yesodco/5yQcbvDulNfy

Discussion