css-modulesを初めて導入してみて思ったこと

6939 ワード
React css-modules CSS webpack JavaScript CSS テキストリンク

どうもヒロです。
もうそろそろ8月だというのに梅雨が抜けきらない感じに雨が降りますよね。年々梅雨の時期がズレて来ているように感じます。
そんなこんなで、前回の記事wp-rest-apiとreact.jsを使って色々試してみた話しでcss-modulesを初めて使用してみて思ったことや簡単な導入の仕方等、説明して行きたいと思います。

前回と同じですが、コードはこちらのリポジトリにあります。

css-modules導入のことはじめ

初めに、css-modulesを使うにはcss-loaderが必要なので、css-loaderをインストールしましょう。

ターミナル
$ npm i css-loader -D

そして、webpackのconfigファイルの中にcss-loaderを読み込みますが、以下のような感じで読み込みます。

webpack.config.babel.js
{
  test: /\.css$/,
  loaders: ['style', 'css?modules', 'postcss']
}

上記のcss?modulesとなっているところがポイントで、上記のようにすることによりcss-modulesを使用することが出来ます。

ここまでが完了したらあとは簡単！適当にCSSのクラスを用意しましょう。

assets/css/style.css
.loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 100;
}

.loaderBg {
  background: #f7f7f7;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
}

.contentWrap {
  display: flex;
  flex-wrap: wrap;
}

ここで一つポイント。通常CSSのクラス名を決める時、キャメルケースにはしないのが一般的だと思いますが、javascript側に読み込ませる為にキャメルケースを採用しています。

実際に読み込ませてみる

assets/js/container/Main.jsx
import styles from '../../css/style.css';
...
<main>
  <Header page="もふ☆パラブログ" leftIcon={false} />
  <div className={styles.contentWrap}>{this.state.body ? title : ''}</div>
</main>
...

上記のstyles.contentWrapの部分でCSSを読み込んでいます。実際にブラウザでこの部分を確認してみると....

ちゃんと読み込めてる！

感想

css-modules使ってみたいという気持ちはあった物の、導入が面倒な気がして引き気味でしたが、やってみたら意外と簡単でした。

また、inline-cssと違い、今までと同じようにCSSを記述し、それを読み込むだけなので、導入してみて違和感等もありませんでした。むしろ今後積極的に取り入れて行きたいと思えるくらい便利だなーと思いました。

BEMやSMACCS等で適切なルール決めをすれば不要なのかもしれませんし、そもそもclassがバッティングするような設計が間違いなのかもしれませんが、本当に違和感がなかった。というのが正直な感想ですね。

まとまりが悪いですが汗
今回はこんな感じで！それではまた！

参考

CSSモジュール ― 明るい未来へようこそ
http://postd.cc/css-modules/
css-modulesのリポジトリ
https://github.com/css-modules/css-modules
webpackのcss-loaderでCSS Modulesをやる
http://qiita.com/_likr/items/c335dec5221024ad56bc