CSS Modules

ELI5 — The Vibe Check

CSS Modules are like giving every CSS class a unique ID badge so they never clash with each other. You write normal CSS, but the build tool scrambles the class names so your .button in one file can't bully the .button in another file. Peace in the stylesheet kingdom.

Real Talk

CSS Modules is a CSS file convention where class names are locally scoped by default through automatic unique naming at build time. It prevents global namespace collisions while allowing standard CSS authoring, and is supported natively by most modern bundlers.

Show Me The Code

/* styles.module.css */
.button { background: blue; }

// Component.jsx
import styles from './styles.module.css';
<button className={styles.button}>Click</button>

When You'll Hear This

"CSS Modules give you scoping without the CSS-in-JS runtime cost" / "Just rename it to .module.css and your classes are automatically scoped"