CSS Modulesの書き方

komosyu2023.03.11

はじめに

Next.js で実装するときに style はCSS Modulesを気に入っていて使うことが多いのですが、使っていくうちにこの場合はどう書けばいいんだけ？というのがわからなくなることが出てきたので、そんな時に迷わないようにまとめてみようと思います。

CSS Modules とは

CSS Modulesとはコンポーネントごとに CSS をローカルスコープする技術のことです。

コンパイル時にコンポーネントごとにユニークな文字列を付与することでスコープ化することができて、CSS 設計に頭を悩ませる時間を短縮することができて非常に助かっています。

<ul class="Main_list__aVD5K">
  <li class="Sub_itemLink__72_Ki">test</li>
</ul>

最終的にはこんな感じでコンポーネント名+コンポーネント内の命名+ユニークな文字列として出力してくれます。

CSS Modules の基本的な使い方

使い方は非常に簡単で、Next.js のインストール時に初期状態でも設定されていたりするので感覚的にわかるかもしれませんが、ここでも一応簡単に解説していこうと思います。

便利なので、scss も使えるようにしておきましょう。

- yarn
$ yarn add sass --dev

- npm
$ npm install sass --save-dev

実際にコンポーネントの中で使う場合はこのような形になります。

ディレクトリ構成は以下のようなものとしておきます。

/components
    /Post.tsx
    /Post.module.scss

それではこの中で実際に使う方法を書いていきます。

import Link from 'next/link'
import style from './Post.module.scss'

export const Post = () => {
  return (
    <Link href="" className={style.link}>
      <h2 className={style.linkTitle}>投稿のタイトル</h2>
      <p className={style.linkDescription}>
        投稿に関する説明文などが入ってきます
      </p>
    </Link>
  )
}

.link {
  background-color: pink;
}
.linkTitle {
  font-size: 2rem;
}
.linkDescription {
  font-size: 1.4rem;
}

とこんな感じで、Post.tsxコンポーネントの方でPost.module.scssを読み込んで、className={style.***}といった感じで***に適当なクラス名を入力しておきます。
そして、Post.module.scssの方では***に対して style を当てていけばいいだけなので、コンポーネントを適切に分けることができていれば CSS 設計のことはそこまで考えずに済むので楽ちんです。

いろんな書き方

ここからは、上記で説明したような基本的な書き方だけでは補えない場面にどう対応したらよいかを見ていきましょう。

複数使いたいとき

例えば複数のクラス名をつけたい場合はどうしたらよいでしょうか？

export const Post = () => {
  return (
    <Link href="" className={`${style.link} ${style.link2} ${style.link3}`}>
      <h2 className={style.linkTitle}>投稿のタイトル</h2>
      <p className={style.linkDescription}>
        投稿に関する説明文などが入ってきます
      </p>
    </Link>
  )
}

といった感じで{}の中に${}を入れてあげれば問題ないです。

条件で分けたいとき

次は条件で分けたい場合についてです。

例えば、あるフラグが true になっているときだけ色を変えたいみたいな場面ではこのように三項演算子を使っての条件分岐などを行うことができます！

export const Post = () => {
  return (
    <Link
      href=""
      className={`${style.link} ${isDanger ? style.red : style.default}`}
    >
      <h2 className={style.linkTitle}>投稿のタイトル</h2>
      <p className={style.linkDescription}>
        投稿に関する説明文などが入ってきます
      </p>
    </Link>
  )
}

変数を扱いたいとき

変数を扱いたいときにはこんな感じで書きます。

export const Post = (colorName) => {
  return (
    <Link href="" className={`${style.link} ${style[`${colorName}`]}`}>
      <h2 className={style.linkTitle}>投稿のタイトル</h2>
      <p className={style.linkDescription}>
        投稿に関する説明文などが入ってきます
      </p>
    </Link>
  )
}

書き方としては${style[${***}]}といった感じで、***に変数を入れてあげます。
上記の例だと、colorNameが変数で、中の値はred,blue,greenだったり渡されてくる props に応じて変わってくる想定ですが、そういった場合に通常通り${style.colorName}みたいに書いているとcolorNameというクラス名にしか style を当てることができないので、このような書き方をする必要があります。

参考

さいごに

CSS Modulesはこれまで結構使っていたつもりだったのですが、意外と使いこなせていなかったことに気がついたので今回まとめることができてよかったです。
また新たに気がついたことや書き方があったら記事にしていこうと思います。

あと、CSS Modules以外にも他の css 記法も経験していきたいなと思っているので、その経験も記事にしていきます。