【Vue.js】CSS Modulesとは何かを調べてみた

2021-02-10

CSS Modulesとは

CSS Modulesを使うと、CSSのScopeがローカルになります。これに関して具体例を用いて解説します。まず初めにHTMLにCSSを当てることを考えてみます。次のh1タグがあるとします。

<h1 class="title">KATUBLO</h1>

このh1タグに対して何らかのCSSを当てたい場合はclass名を指定して次のように書きます。

.title {
  ...
}

CSS Modulesの場合はcssを次のように定義したのち

// styles.css
.title {
  ...
}

moduleとしてimportして変数としてclassに指定します。

import styles from "./styles.css";

element.innerHTML = 
  `<h1 class="${styles.title}">
     KATUBLO
   </h1>`;

ブラウザでJavaScriptによってレンダリングされ、最終的なアウトプットは次のようになります。

<h1 class="_styles__title_309571057">
  KATUBLO
</h1>

class名は動的に決定されます。また同時にcssも_styles__title_309571057という名前で生成されます。

上で仕組みを説明した通り、一意なclass名がJavaScriptによって生成されそのclass名に対してcssが適応されるので誤って他のコンポーネントのDOMを上書きしてしまうということがなくなります。

参考文献：

別の記事で開発の生産性やQOL(Quality of Life)を向上させる上で買って良かったものを紹介しているので良かったらみてください。