🟨

CSS Modulesとは？

2025/01/08に公開

CSS Modulesは、コンポーネント指向のWeb開発におけるスタイリング手法の一つです。主な特徴は以下の通りです：
スコープ化: 各コンポーネントのスタイルをローカルスコープ化し、クラス名の衝突を防ぎます。
自動的なユニーク化: コンパイル時にクラス名に一意の識別子を付与し、グローバルな名前空間の汚染を回避します。
JavaScriptとの統合: CSSファイルをJavaScriptモジュールとしてインポートし、オブジェクトのようにクラス名を扱えます。
再利用性: スタイルを再利用可能なモジュールとして定義でき、コードの重複を減らせます。
柔軟性: 通常のCSSと同様にメディアクエリやセレクタの組み合わせが可能です。
CSS Modulesは、特にReactやVue.jsなどのコンポーネントベースのフレームワークと相性が良く、大規模プロジェクトでのスタイル管理を容易にします。

 使用方法ファイル名をxxx.module.cssのように命名します。
JavaScriptファイルでCSSをインポートし、クラス名をオブジェクトのプロパティとして使用します。
import styles from './styles.module.css';

function Button() {
  return <button className={styles.button}>Click me!</button>;
}
この手法により、スタイルの衝突を心配せずにコンポーネント単位でCSSを管理できます。

使用方法

Discussion