Styles Colocated

When styles live beside the component they dress, you can rename, move, or delete UI with confidence—nothing else breaks. Local scope avoids specificity wars, improves tree-shaking, and keeps global CSS tiny, which accelerates first paint and simplifies theming.

Correct Example

// features/profile/ProfileCard.tsx
import styles from "./ProfileCard.module.css";

type Props = { name: string; avatarUrl: string };

export function ProfileCard({ name, avatarUrl }: Props) {
  return (
    <article className={styles.card}>
      <img src={avatarUrl} alt={`${name} avatar`} className={styles.avatar} />
      <h2 className={styles.name}>{name}</h2>
    </article>
  );
}

/* ProfileCard.module.css (same folder)
.card   { @apply flex items-center gap-4 rounded-lg bg-white p-4 shadow; }
.avatar { @apply h-12 w-12 rounded-full object-cover; }
.name   { @apply text-lg font-semibold text-zinc-900; }
*/

Why it’s good:

• CSS module sits next to the component; deleting the folder removes dead code.
• Class names are scoped/hash-namespaced, eliminating collisions.
• Utility-first @apply with Tailwind keeps file small and predictable.

Incorrect Example

// uses a global class defined in app.css
export function ProfileCard({ name, avatarUrl }: { name: string; avatarUrl: string }) {
  return (
    <article className="profile-card">   {/* global leakage */}
      <img src={avatarUrl} alt="" className="avatar" />
      <h2 className="name">{name}</h2>
    </article>
  );
}

/* app.css (huge shared stylesheet)
.profile-card { border-radius: 6px; background: #fff; padding: 1rem; }
...
/* 2000 lines later another team adds: *
.profile-card { background: var(--brand-accent); } /* overrides earlier rule */
*/

What’s wrong:

• Styles live in a monolithic global file—easy to overwrite by accident.
• Deleting ProfileCard leaves orphaned rules in app.css.
• Specificity bugs surface when later rules collide.

Key Takeaways

• Put styles inside the feature folder: Component.tsx + Component.module.css/tsx.
• Prefer scoped solutions (CSS Modules, Tailwind classes, CSS-in-JS) over global selectors.
• Global stylesheet should hold only design-system tokens and element resets.
• Co-location simplifies code owners & review diffs—UI and style changes travel together.
• Remove an unused component? The bundled CSS vanishes too—no dead payload.