CSS

CSS Modulesの威力

現代のWeb開発において、大規模なCSS管理は悪夢になりがちです。グローバルな名前の衝突、デッドコード、依存関係の管理は常に悩みの種です。Tailwind CSSのようなユーティリティファーストなフレームワークも人気ですが、複雑なアニメーションや独自のデザインシステムを必要とするプロジェクトでは、CSS Modulesが強力な選択肢となります。

CSS Modulesとは？

CSS Modulesは、すべてのクラス名とアニメーション名がデフォルトでローカルにスコープされるCSSファイルです。つまり、.buttonや.titleのような一般的な名前を、競合を心配することなく異なるコンポーネントで使用できます。

例：ネオンボタン

光るエフェクトを持つ再利用可能なButtonコンポーネントを作ってみましょう。

Button.module.css

.button {
  background: #000;
  color: #0ff;
  border: 1px solid #0ff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px #0ff;
}

.button:hover {
  background: #0ff;
  color: #000;
  box-shadow: 0 0 20px #0ff;
}

Button.tsx

import styles from './Button.module.css';

export default function Button({ text }: { text: string }) {
  return <button className={styles.button}>{text}</button>;
}

なぜCSS Modulesを選ぶのか

  1. スコープ付きスタイル: グローバルスタイルを上書きするために!importantや詳細なセレクタを使う必要はもうありません。
  2. クリーンなJSX: マークアップが大量のユーティリティクラスで埋め尽くされることはありません。セマンティックな状態を保てます。
  3. CSSの力: 複雑なアニメーション（@keyframes）、疑似要素（::before、::after）、メディアクエリなど、CSSのすべての機能を学習した通りに正確に使用できます。

視覚的な魅力と独自性が鍵となるこのポートフォリオサイトのようなプロジェクトでは、CSS Modulesが、ピクセルパーフェクトなデザインを作り上げるために必要な制御力を与えてくれます。