Global vs. Component CSS in React/Next.js

Why it exists

In traditional web development, CSS files were global, leading to complex and fragile stylesheets where a small change could break unrelated parts of the site. React's component-based architecture needed a way to encapsulate styles along with markup and logic, preventing these global conflicts.

The mental model

Think of CSS in two categories: global and local. Global styles apply to your entire site (e.g., fonts, color schemes, CSS resets) and are loaded only once. Local styles are specific to a single component (e.g., the padding on a particular button) and live with that component's code, imported just like a helper function.

How it works

In a Next.js app, you import global CSS files (like globals.css) exclusively in the root layout file (app/layout.js). For component-level styling, you create a file named with a .module.css extension, like Button.module.css. Then, inside your component file (Button.js), you import it: import styles from './Button.module.css';. You apply classes using this imported object: <button className={styles.myButton}>. The build process automatically generates a unique class name to guarantee the style is scoped only to that component.

When to use it

This is the standard pattern for styling modern React and Next.js applications. Use global imports for foundational styles like fonts, resets, and utility-class frameworks like Tailwind CSS. Use CSS Modules for the vast majority of your component styling to ensure encapsulation and prevent style leakage.

When not to use it

Avoid importing any non-module CSS file into any component besides the top-level root layout. Doing so breaks the encapsulation model and can introduce hard-to-debug style conflicts and issues with loading order. While CSS-in-JS libraries exist for dynamic styling, CSS Modules cover most use cases effectively.

One canonical example

To style a Card component, you would create Card.js and Card.module.css. Inside Card.module.css, you'd define .wrapper { border: 1px solid #eee; padding: 16px; }. Inside Card.js, you'd write import styles from './Card.module.css'; and use it in your JSX like .... This .wrapper class will not affect any other div on your site.