CSS Modulesの利点を洗い出してみる

そもそもモジュールってなんですか？

「ユニット(一つ一つの要素)」です。

それって便利ですか？

「別に便利ではありません」

それをなんのために使いますか？

「より構成として管理として美しくあるためです」

それって必ずしも必要ですか？

「必ずしも必要とは限りません、使わなくても同じことが出来ます」

はい、CSS Modulesとは部品に充てるスタイルであり、

グローバルとは分離されてかつ取り出さないと取り出せない「ユニット」です。

ここはじめて説明しますがグローバルのCSSはapp.tsxでしか読み込むことができません。

そこでmodulesの登場です。CSS Modulesは個別のtsxファイル単位で読み込むことができます。

簡単に言ってしまえばこのボタンにしか使わないCSSはグローバルに宣言する必要ないよね。

じゃあモジュールというユニット単位でスコープを閉じて使おうということです。

例えばページAに「ボタン」があったとします。

「ボタン」がページAにしか無いのであればCSS Modulesを使ってそのボタンのスタイリングをそのページのみで閉じてあげます。

逆に「ボタン」がページBなどでも使い回される場合、共通するグローバルCSSで管理することになります。

スコープを閉じることのメリットってそんなにあるの？

「明示的に型を付けることと似ていて管理が堅牢になります」

例えばグローバルにクラスを書いていた場合、自由に使いまわされるし、あげく自由に変更されることを許します。

しかしモジュールとしてファイルだけで閉じていた場合、それはそこでしか使われない物だと明示されていることになります。

CSS Modulesを見たメンバーは誰でも「これ変えていいんですか？」と必ず言うことになるでしょう。

Pros

・良く言えば保守的

・記述ルール的に影響を及ぼしにくいところが扱いやすい

Cons

・悪く言えば拡張性がない

・共有化する前提じゃない

使い方の説明をしてなかったんですがCSS Modulesは使用するファイルとセットでフォルダに配置しもいいですが、

この場合フォルダによってネストされていない場合管理が煩わしくなる上、見た目もいいとは言えないです。

stylesと同じディレクトリにmodulesフォルダを作ってそこで適用するファイルと同じ命名で管理するのが最良だと思います。