CSS Modules に触れてみる

https://github.com/css-modules/css-modules

modular and reusable CSS!

• No more conflicts.
• Explicit dependencies.
• No global scope.

実装は css-loader でされている。

Composition

Sass の @extend のようなものが利用できる。

https://github.com/css-modules/css-modules#composition

OOP の継承のような感じで単純な共通化のために利用すると差分プログラミングの罠でメンテナンスが辛くなりそうだが、きちんとis-aかどうか見極めて設計すると有効そう。共通コンポーネントの見た目の種類を実装しわけるときは使えそう。

Next.js

https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

(おそらく) css-loader が内包されていてデフォルトで使えるようになっている。sass をいれると .module.scss ファイルで記述もできる。

In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files. These .css files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.

production では css ファイルも Code Splitting されて必要なタイミングでロードされる仕組みになっているらしい。

https://twitter.com/takepepe/status/1332878916566958082

typed-css-modules

Quramy/typed-css-modules を利用すると、.module.css の内容を解釈して TypeScript の型を自動生成してくれる。

型が効くようになった。

React だと props で細かくスタイルを指定できないので、Layout コンポーネントのような細かいスタイルを指定したいようなコンポーネントには不向き。パターンを CSS で予め準備しておいて、付与する className を動的にしないといけない。無駄なものは発生する。