CSSモジュールを試してみた。

CSSモジュールとは


CSSを書く人はよく、クラス名が衝突するのことを避けるため、BEM記法を用いる。
コンポーネント名を基準にして、その子供の要素を_(アンダーバー)二つで下の図のようにつなげていく方法だ。
だが、この命名規則だと、だんだんクラス名をつけるのがおっくうになってくる。そういった問題を解決するために作られたのがCSSモジュールという考え方。


CSSモジュールはコンポーネントごとにフォルダ分けしてそこにcssを設置すれば、他のコンポーネントとクラスがバッティングしないようにクラス名を再生成してくれる。


例えば上の画像を見て欲しい。
Components/0-Logo/Logo.cssに以下のようなCSSが書いてある。

.logo {
  background-image: url("./logo.svg");
  background-size: 200px 200px;
  width: 200px;
  height: 200px;
}

するとCSSモジュールは以下のようなクラス名を自動で生成する。

._src_components_0_Logo_Logo__logo {
  background-image: url("./logo.svg");
  background-size: 200px 200px;
  width: 200px;
  height: 200px;
}

つまり、元々のクラス名に、._src_フォルダ名_フォルダ名_CSSファイル名を付与した新しいクラスを生成してくれる。これによりコンポーネントごとにフォルダ単位でCSSを管理できるので見通しが良くなる。プロジェクトでは再生成された方のCSSを読み込んで使う。

Reactを使ったサンプル

ReactとCSSモジュールはコンポーネントを1つのフォルダにまとめて管理するという点で相性がいい。
例えば以下は同じディレクトリにLogo.jsとLogo.cssが入っていると仮定したReactのソースコードである。

import styles from './Logo.css';

import React, { Component } from 'react';

export default class Logo extends Component {
  render() {
    return <div className={styles.logo} />;
}

CSSモジュールを使うとJSと同じようにCSSもimportして使う事ができる。importされたデータはオブジェクトとして扱う事ができる。
上の例では、styles.logoに先ほどの_src_components_0_Logo_Logo__logoというクラスが代入される。

試してみよう

以下のレポジトリをZipでダウンロードして


以下のソースコードを入力するだけで簡単に試すことが可能だ。

npm install
npm start

これだけで簡単にReactとCSSモジュールを試すことができる。

感想

確かにコンポーネントごとにフォルダを作りその中にCSSやらJavaScriptやらを書いて、CSSモジュールに自動でそのパスのクラス名を出力してもらうと他のコンポーネントとバッティングすることはない。
ただ、コンポーネントが増えれば増えるほどそれに付随して管理するファイルやフォルダも増えていく。それらのアセットをチーム内でどのように共有していくのかと言った事が課題にあげられると思う。
それに結局グローバルにやや冗長なクラス名のルールセットを結局読み込まなければならないというのには少しがっかりだ。いつになればCSSのローカル化が実現するのだろうか...


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →