同じクラス名でも見た目が混ざらない？CSS Modulesの範囲を確かめる

Modalとサイト内検索のCSSを読むと、どちらにも.headerがありました。同じページで使ったら、片方の見た目がもう片方へ混ざらないのでしょうか。実CSSを小さな比較ページでビルドすると、HTMLへ付くクラス名は別になり、余白や配置の違いもそれぞれ残りました。

ソースの短い名前を、ファイルごとの名前へ

CSS Modulesは、.module.cssというファイルのクラス名を、そのファイルの範囲で扱う方式です。コンポーネントは読み込んだstylesのheaderなどを参照し、実際に生成されたクラス名をHTMLへ付けます。 同じheaderという名前でも、Modal.module.cssから取るものと、SiteSearchDialog.module.cssから取るものは別です。ソース上の読みやすい短い名前を保ちながら、生成後の名前を区別します。

実際の二つのCSSを、一枚のページで表示する

Next.js 16.3.2の専用ページへ、二つの実CSSファイルを読み込みました。中身はダミーの見出しとボタンで、実アプリの画面全体を再現する試験ではありません。 ビルド後、ブラウザーのDOMからクラス名を読み、計算済みのalign-itemsとpaddingも確認しました。どちらもheaderを使いますが、次のように異なりました。

同じ名前だから後から読んだ方が必ず上書きする、という状態ではありませんでした。ただし、生成名の末尾などはビルド条件で変わり得ます。今回の名前をコピーして別の場所へ固定記入するための表ではありません。

名前を分けても、通常のCSSから隔離されるわけではない

比較ページには、bodyの文字色やフォント、buttonの大きさを指定するグローバルCSSも入れました。二つの部品は、こうした共通の環境の中にあります。CSS Modulesは、Shadow DOMのように別のDOM境界を作る機能ではありません。 継承するプロパティ、グローバルな要素セレクター、CSS変数、同じ要素に複数のクラスを付けた場合の詳細度などは、通常のCSSの仕組みとして関わります。「クラス名が分かれたから、ほかのスタイルは絶対に影響しない」とは言えません。

クラスの付け先が違えば、期待した見た目にもならない

たとえばstyles.headerを外側の箱へ付けるのか、その中の見出しへ付けるのかでも、対象は変わります。モジュールを読み込んだだけで、適切な場所へ自動的に割り当てられるわけではありません。 見た目が違うときは、まずDOMに期待したクラスが付いているかを見ます。次にその規則が当たり、ほかの指定や継承とどう組み合わさっているかを追うと、名前の問題と配置の問題を分けられます。

一緒に使って、生成名と見た目の両方を見る

今回は同名クラスを持つ実CSSを同時に読み、生成名と実表示が別になることを確認しました。全画面のCSS競合や、すべての画面幅を検証したものではありません。 CSS Modulesを「勝手に見た目を守ってくれる仕組み」と覚えるより、ローカルなクラス名を区別する仕組みと考える。その上で、共通スタイルがどう届くかを読むと、部品ごとの設計とページ全体のデザインをつなげやすくなります。

参照：Next.js公式「CSS」のCSS Modules・Global CSS。実ModalとSiteSearchDialogのCSSを確認しました。

確認日：2026年9月22日。実装・検証結果・公式資料は確認時点のものです。