はじめに
これまでフロントエンドはSassとBEMを組み合わせてクラス設計していたのですが、BEMはblock__element--modifierという風にクラス名が長くなりますし、個人的にBEMの運用で悩む場面がかなり多かったです。
そして今回Reactを学習する機会があり、CSS Modulesがとても便利だったので記事に残そうと思います。
使い方
今回はSassを使うのでまずはインストールします。
npm install sass
末尾に.module.scss (css)を付与したファイルを作成します。
コンポーネント内で先ほど作成したファイルをインポートします。
App.js
import styles from "./App.module.scss";
JSXの中でクラス名を指定します。
App.js
<div className={styles.container}>
...
.scssファイルではいつも通りスタイルを指定します。
App.module.scss
.container {
...
ここまででブラウザの開発者ツールで確認してみると、下記の様なクラス名が付与されます。
ファイル名_クラス名_ハッシュというルールで命名されます。これでクラス名の衝突を防ぐことが出来るわけなんですね。クラス名で悩むことがぐっと減りそうです。
あとがき
今回CSS Modulesを使うにあたって色々調べたのですが、他にも本当にたくさんのスタイリング方法があってどれを使うべきなのか悩ましいですね。他にお勧めの方法があればぜひ教えていただきたいです。