CSSの書き方を比べる——素のCSS・CSS Modules・Tailwind CSS
素のCSS・CSS Modules・Tailwind CSSは、どれが上かより「誰が更新し、変更の影響をどこで読むか」で選ぶと決めやすくなります。引き継ぎやすさ・変更範囲の読みやすさ・導入の手間の3軸で、公式ドキュメントをもとに比べます。
CSSの書き方は、技術の優劣より「あとで誰が更新し、変更の影響をどこで読むか」で選ぶと決めやすくなります。私はデザインと実装を一人で往復してきたので、修正時に見る場所が少なく済むかを特に気にしています。
CSSの機能そのものは以前の記事で書きました。今回は、どの形で書いて管理するかの話です。
3つの違いを、スタイルの効く範囲を中心に並べると次のようになります。
| 素のCSS | CSS Modules | Tailwind CSS | |
|---|---|---|---|
| 書く場所 | CSSファイル | コンポーネントごとのCSSファイル | HTML/JSXのクラス属性 |
| 効く範囲 | セレクタが一致する全要素 | 読み込んだファイルのクラスを付けた要素 | クラスを付けた要素 |
| 引き継ぎで読むもの | CSSの知識と設計ルール | CSSの知識とコンポーネント構成 | CSSの知識とクラス名の規則 |
| 変更範囲の読みやすさ | 設計ルール次第 | ファイル単位で追いやすい | 要素単位で追いやすい |
| 導入の手間 | 不要 | ビルドの仕組みが前提 | 公式手順はビルドツールへの組み込み |
表は私の整理で、案件の規模や既存のコードによって感じ方は変わります。
素のCSS：道具がいらないぶん、ルールを自分で持つ
素のCSSはブラウザだけで動くので、ビルド環境を持たないサイトやCMSのテーマにもそのまま置けます。引き継ぐ相手に求めるのもCSSの知識だけです。
一方で、クラス名はページ全体で共有されるため、「このクラスを変えたらどこに響くか」は検索して確かめることになります。命名規則などのルールを決めて守り続ける必要があります。
補う機能はCSS自体にも増えています。@layerは優先順位をレイヤーの順序で決められる機能で、MDNでは2022年3月から主要ブラウザで利用可能とされています。@scopeは特定のDOMの範囲だけを選択する機能です。ただしMDNの区分は2026年3月からのBaseline新規対応で、古い環境では動かない可能性があります。継承されるプロパティは範囲の外にも届くので、完全な隔離にもなりません。
CSS Modules：CSSのまま、名前の衝突だけを避ける
CSS Modulesは、クラス名とアニメーション名が既定でローカルスコープになるCSSファイルのことです。Next.jsのドキュメントでも、一意なクラス名を生成することで、別のファイルで同じクラス名を使えると説明されています。.module.cssのファイルを作り、importして使います。
中身はほぼCSSなので、CSSを書ける人なら読み始めやすく、変更の影響もそのファイルを読み込むコンポーネントまで追えば見当がつきます。
注意したいのは読み込み順です。同じドキュメントには、CSSの順序はimportの順序で決まること、開発時と本番ビルドで順序の挙動が異なる場合があることが書かれています。見た目の確認は本番ビルドでも行いたいところです。
Tailwind CSS：クラスの組み合わせで書き、値を揃える
Tailwind CSSは、単一目的のクラスをマークアップに直接並べて書く方式です。公式は利点の一つに、クラスの追加や削除がその要素にしか影響しないことを挙げています。インラインスタイルとの違いとしては、定義済みのデザインシステムから値を選べること、hoverやメディアクエリを指定できることを挙げています。
読み手にはクラス名の規則を覚える手間があり、一つの要素のクラス列は長くなりがちです。繰り返しへの対処として、公式はループ、複数カーソル編集、コンポーネント化、カスタムCSSを示しています。導入はNext.jsの手順ならパッケージの追加、PostCSSの設定、CSSでの読み込みの3段階です。
私が選ぶときに確かめる3つの問い
- 公開後に誰が更新するか：ビルド環境を持たない人が触るなら、素のCSSが候補に残ります
- 画面はコンポーネントで組まれるか：組まれるなら、CSS ModulesかTailwind CSSが扱いやすくなります
- 値の揃え方をどこで担保するか：クラスの仕組みで揃えたいならTailwind CSS、CSSを書く人の間の合意で進められるならCSS Modulesも合います
併用もできます。Next.jsのドキュメントは、大半をTailwind CSSで書き、足りないところをCSS Modulesで補う組み合わせを推奨しています。ただ、どの案件にも当てはまる答えではないと受け取っています。このサイトはTailwind CSSのユーティリティと、globals.cssに置いたデザイントークンや共通クラスの併用で、CSS Modulesは使っていません。
明日から試せる一手
いま手元にあるサイトのボタンを1つ選び、その色を変えると仮定して、確認が必要な場所を書き出してみてください。開くファイルの数、検索の件数、他のページに響くかどうかの判断のしやすさが見えてきます。書き出しに時間がかかるなら、書き方を変える前に、変更範囲の読み方をREADMEに残すところから始められます。