CSSの整理
2種類の置き場所
Next.js のスタイルには、大きく2つの置き場所があります。
globals.css は、サイト全体に効かせるものです。文字の色、余白の基準、ヘッダーやフッターのように「1つしか無いもの」の見た目を書きます。本物のプロジェクトでは app/globals.css をルートレイアウトから読み込み、全ページに行き渡らせます。
CSS Modules は、部品ごとに閉じたものです。ItemCard.module.css のように .module.css で終わる名前にすると、クラス名がビルド時に自動で書き換えられ、他の部品と名前がぶつからなくなります。
import styles from "./ItemCard.module.css";
<div className={styles.card}>...</div>なお、このコースのプレビューは CSS ファイルを1枚にまとめて読み込む作りです。.module.css の import は動かないので、演習では globals.css と className の使い分けで練習します。書き分けの考え方は本物と同じです。
どちらに書くか迷ったら
置き場所を決める基準は「その見た目が、どこまで届いてほしいか」です。
全ページのヘッダーやフッター、body の文字色は globals.css です。特定の部品の中だけで完結する見た目、たとえば商品カードの枠線や角丸は、部品側に閉じておくと安全です。全部を globals.css に積むと、.card という名前を後から別の場所でも使いたくなったときに困ります。
名前の付け方も設計のうち
globals.css に書くクラスには、site-header や item-card のようにどこの何かが分かる名前を付けます。.title や .box のような短い名前は、増えるほど衝突します。
演習
globals.css を整えて、商品カードの見た目を作ります。