CSS Modulesとは?

  • 2019年6月7日
  • 2019年6月29日
  • entry

大規模化するCSSの問題点

Christopherは以下をあげています。

1. グローバルネームスペース
 -> スタイルはグローバルスコープなので、全てに影響がある。JSでグローバル変数は懸念されるのにCSSは許容されている。
2. 依存性
 -> ネストすることによるスコープ。パフォーマンスや再利用性が低下する。
3. デッドコードの削除
 -> どのスタイルがどのコードに影響するか測れない。
4. 縮小
5. 定数の共有
6. 非決定論的な解決
7. 分離

そしてこれらはjavascriptを使ってスタイリングすれば解決すると言いました。
しかしそれでは問題もあるため、この課題に立ち向かって出来上がったのが、CSSモジュール。
CSSモジュールとは

スコープがローカルを約束

各ファイルが別々にコンパイルされるため、スコープがローカルになり、他ファイルへのスタイル影響がなくなる。
そのため、複雑なスタイル名や、複数指定、などが不要となり、シンプルに設計できる。
BEMのような複雑なスタイル名は不要

どうやって実現しているの?

Javascriptで、requireやimportでcssを読み込んで使うことができる。
実際のクラスは一意が約束された名前で自動生成される。

コンポジション

sassのextendのようにinclude指定が可能

CSSモジュールの使い方

1. npm install css-loader でインストールして使う。
2. webpackでcss-loaderを読み込む