CSS Modules vs Global CSS in Next.js

The plain-language idea

Next.js supports two ways to write CSS, and they're allowed to be imported from different places on purpose.

A CSS Module (button.module.css) scopes every class name to the component that imports it — the build tool hashes each class name so .button in one file can never collide with .button in another. Because each module's classes are isolated, a CSS Module can be imported from any component, anywhere in the tree, and it only ever affects that component.

Global CSS (a plain .css file with unscoped selectors like body { margin: 0; }) has no such isolation — every selector in it can affect the entire page, everywhere, all at once. Next.js enforces that a global stylesheet can only be imported from the root layout (app/layout.tsx), not from an arbitrary component. This isn't a style guideline — it's an actual build-time restriction the App Router enforces.

See it in a real thing: scoping a button, and where globals.css lives

/* app/components/Button.module.css */
.button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

// app/components/Button.tsx
import styles from "./Button.module.css";

export function Button({ children }: { children: React.ReactNode }) {
  return <button className={styles.button}>{children}</button>;
}

styles.button isn't the string "button" — it's something like "Button_button__a1b2c", generated at build time so this component's .button class can never collide with another component's .button class, no matter how deep it's nested or how many other modules exist.

Global CSS, by contrast, is imported exactly once, in the root layout:

// app/layout.tsx
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Trying that same import "./globals.css" from inside Button.tsx instead is a build error, not a style mistake caught in review — the App Router rejects it outright.

What people usually miss

Watch out

• The restriction is about predictable bundling, not just style discipline. The App Router code-splits CSS per route so a page only loads the styles it actually needs. A global stylesheet imported from a random nested component would have to be included in every bundle that could possibly render that component, defeating the entire point of scoping styles to routes — restricting global CSS to the root layout keeps that guarantee simple and enforceable.
• className={styles.button} only works if the class actually exists in the module file. A typo — styles.buton — doesn't error at build time in the way a missing import would; it silently resolves to undefined, and the element renders with no class applied.
• CSS Modules and global CSS aren't mutually exclusive in one project. Most apps use global CSS for tokens and resets in globals.css, and CSS Modules for everything else — the two coexist by design, they're just not interchangeable for the same job.

The genealogy: this is the same "where can this live" question the design-token layer already answers

This project's own token system — primitive, semantic, and component-level CSS variables in globals.css — is exactly the kind of thing that belongs in global CSS: values genuinely meant to apply everywhere, consumed by name from any component's CSS Module. A CSS Module can freely reference a global custom property like var(--color-primary) without importing anything extra — scoping applies to class names, not to the custom properties a scoped rule is allowed to read.