CSSカスタムプロパティのとりあえずのメモ

CSSカスタムプロパティとは

基本的にはMDNに記載されますが要するにCSSに変数を定義して、関数で値を使えるようになる感じです。

:rootという擬似クラスを使用して、変数を設定します。
以下、サンプルです。

:root {
  --primaryColor: #4525F2;
  --primaryActiveColor: #4324EA;
  --primaryDisabledColor: #4324EA;
  --secondaryColor: #F2F4F8;
  --secondaryDisabledColor: #E9ECF2;
  --White: #FFF;
  --Black: #1C2126;
  --Gray: #8B8B8B;
}

変数名の付け方

変数名なのでなんでもいいんですが、わかりやすい方がいいので以下サイトを参考に自分でちょこちょこ変えてます

https://material.io/design/color/the-color-system.html#color-theme-creation

意味のあるものは`Active`とか`Disabled`とかの名前をつけてあげて、意味のないものは`300`とか`700`とかをつけてあげるのが良いかと。

変数名をつけた方が良い要素

• 色
• font-family（複数様々な場所で指定する場合）
• font-size
• margin
• padding
• border

フォントサイズやマージンは数値を設定するだけなので、変数名の方が長くなってしまいあんま意味ないと思いがちです。

が、一番最初にメディアクエリを指定して画面サイズに応じて数値の設定をすると、どの画面サイズでもデザインとユーザービリティ両方を担保できるようになるので使い勝手がいいです。

以下見本です。

@media screen and (min-width:480px) {
  :root {
    --heading1Size: 24px;
    --heading2Size: 22px;
  }
}
@media screen and (min-width:768px) and ( max-width:1024px) {
  :root {
    --heading1Size: 28px;
    --heading2Size: 24px;
  }
}
@media screen and (min-width:1024px) {
  :root {
    --heading1Size: 36px;
    --heading2Size: 32px;
  }
}

おわりに

カスタムプロパティはダークモードの対応に関してかなり重要になってくると思っています。（ダークモードのコード書いて色を指定し直せばいいだけですからね、、！）

また、メディアクエリを使用しないレスポンシブ対応も増えている中で、文字サイズや左右マージンはメディアクエリを使用しなければデザインとユーザービリティの両立は難しいと感じていました。

その中で、カスタムプロパティを使うと、コードが複雑化せずに両方担保できるようになり、大変使い勝手がよいと思います。

メンテコストを意識した修正が少なく読みやすいコードを書いていきたいです💻