CSS Modules

Scoped styles, composition, global styles, and dynamic classes.

Overview

CSS Modules provide scoped, modular CSS in Next.js.

Key Concepts

Scoped Styles — Styles local to component
Composition — Extend base styles
Global Styles — Import in layout or global file
Dynamic Classes — Conditional class names
TypeScript Support — Type-safe class names

Code Examples

/* components/Card.module.css */
.card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cardHeader {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.cardBody {
  color: #666;
}

.primary {
  border-left: 4px solid #0070f3;
}

.success {
  border-left: 4px solid #28a745;
}

// components/Card.jsx
import styles from './Card.module.css';

export default function Card({ variant = 'default', title, children }) {
  const classNames = [
    styles.card,
    variant === 'primary' && styles.primary,
    variant === 'success' && styles.success
  ].filter(Boolean).join(' ');

  return (
    <div className={classNames}>
      {title && <div className={styles.cardHeader}>{title}</div>}
      <div className={styles.cardBody}>{children}</div>
    </div>
  );
}

// Global styles
// app/globals.css
body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

// Layout with global styles
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Practice

Build a component library using CSS Modules with variants and composition.