CSS Modulesとは結局なんなのか。

CSS Modulesとは、JavaScriptでCSSを扱う際に、適用範囲を絞ったスタイリングを実現する仕様である。フレームワークでもツールでもない。

目的と仕組み

CSS Modulesは、スタイリングの衝突を心配せずにコンポーネント単位でCSSを管理したい、というニーズから生まれた。ここで言うコンポーネントは、JavaScriptで生成する任意のDOMオブジェクトを指す。

アプローチとしては、以下のような形となる。

まず、CSS Module自体は、xxx.module.cssのような名称を持つ単純なCSSファイルである。これをJavaScriptで読み込むと、そのCSSファイルをJSONオブジェクトのようなイメージで扱える。このオブジェクトは、CSSファイル内のクラスセレクタをキーに持ち、そのキーは対応するスタイルの識別子として機能する。

我ながらなんのこっちゃ。CSSファイル内のクラスセレクタを、JavaScriptファイル内でそのままクラス名のように扱える。

.className {
  color: green;
}

import styles from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

上記のような形でソースに埋め込まれたクラス名は、バンドル時に他のコンポーネントのクラス名と衝突しないように命名し直される。

もちろん、上記のような記述や振る舞いは、JavaScriptの標準ではない。CSS Modulesは、その仕様をサポートするバンドラーの存在が前提となっている（公式のリポジトリにCSS Modulesをサポートするツールの案内がある）。

現状では、多くのツールがデフォルトの設定でCSS Modulesをサポートしている。界隈的にはデファクトスタンダードの技術と解釈しても良い。と思う。

そんな感じで、CSS Modulesではスコープを限定したコンポーネントのスタイリングを実現する。

参考資料

css-modules/css-modules: Documentation about css-modules