Zenn
Closed2

CSS Module の学習メモ

Next.js
CSS Modules
OkakaOkaka

はじめに

Next.js を利用し初めて２年ほど経過するが、CSS-in-JS か pure CSS を普段使いしている。
しかし、 Performance の点から見ると 公式の見解にもあるように CSS Module の方が優れている。

その学習のメモを残すスクラップ

OkakaOkaka

https://postd.cc/css-modules/

ClassName に " - " を使うのはベストプラックティスではない

キャメルケース、ラクダのこぶケースにする

/* Don't do this */
`class=${[styles.normal, styles['in-progress']].join(" ")}`

/* Using a single name makes a big difference */
`class=${styles['in-progress']}`

/* camelCase makes it even better */
`class=${styles.inProgress}`

状態に合わせたボタンのスタイル

normal button のスタイルをつけて、状態ごとに

// active
className = {styles.isActive}

みたいにしたい

=> コンポジションを使おう

コンポジション

.common {
  /* all the common styles you want */
}
.normal {
  composes: common;
  /* anything that only applies to Normal */
}
.disabled {
  composes: common;
  /* anything that only applies to Disabled */
}
.error {
  composes: common;
  /* anything that only applies to Error */
}
.inProgress {
  composes: common;
  /* anything that only applies to In Progress */
}

こんなことができるなんて、感動。 sass ではできるだろうとは思っていたけど。

このスクラップは3ヶ月前にクローズされました