大規模化する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を読み込む