CSS Module

CSS Module（CSSモジュール）というのは、JavaScriptからCSSファイルを読み込みコンポーネントにスタイルを適用する技術です。

CSSファイルの書き方は基本的に通常のCSSファイルと同じですが、コードが生成される際に自動で一意（ユニーク）なクラス名を生成してくれるため、名前衝突を回避することができ、再利用性が高まりスタイルの変更に強いコードを書くことができます。

使い方としては以下のような形となります。（サンプルコードはReactを使うケースのイメージです）

（1）CSSファイルの拡張子を .module.css にする

文字の色を赤にするというシンプルなケースで書いてみます。

.sample1_text {
  color: red;
}

（2）CSSファイルをインポートしてコンポーネントに割り当てる

JavaScript（React）のファイルからCSSファイルを読み込み、HTMLのclassプロパティに指定します。

import styles from "./sample.module.css";

const Sample = () => {
  return (
    <div className={styles.sample1_text}>
      テキスト
    </div>
  )
}
export default Sample;

このコードをビルドツールでコンパイルして実行ファイルをビルドしたときに、「sample1_text」をユニークな名称にして生成されることで名前衝突が回避できるようになります。