Open2
CSS Module の学習メモ
Okakaはじめに
Next.js を利用し初めて２年ほど経過するが、CSS-in-JS か pure CSS を普段使いしている。
しかし、 Performance の点から見ると 公式の見解にもあるように CSS Module の方が優れている。
その学習のメモを残すスクラップ
Okaka
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 ではできるだろうとは思っていたけど。