CSS Modules versus Styled Components

WHAT THIS TESTS Whether you understand how each approach achieves scoping and can compare them on real axes rather than by preference.

A GOOD ANSWER COVERS Both solve the same core problem, global CSS collisions, but differently. CSS Modules works at build time: you author plain CSS files and the bundler rewrites each class name to a unique hashed name, guaranteeing scope. Developer experience is familiar CSS, tooling is mature, and there is essentially no runtime cost since it is static CSS. The tradeoff is that dynamic, prop-driven styling is more awkward, often handled by toggling classes or inline custom properties. Styled Components is runtime CSS-in-JS: you colocate styles with components in JavaScript, generate unique class names automatically, and easily vary styles based on props and theme. DX is great for dynamic UI and colocation, and collisions are prevented. The cost is runtime work to parse and inject styles, a larger bundle from the library, and potential server-rendering complexity. Newer zero-runtime CSS-in-JS tools aim to keep the authoring style while removing the runtime.

COMMON WRONG ANSWERS Declaring one universally superior ignores context. Claiming Styled Components has no performance cost overlooks runtime style injection and bundle size. Saying CSS Modules cannot do dynamic styles ignores custom properties and class toggling. Forgetting both fully prevent collisions.

LIKELY FOLLOW-UPS How does each prevent collisions? Unique hashed or generated class names. When pick CSS Modules? Performance-sensitive apps with mostly static styles. When Styled Components? Highly dynamic, theme-heavy UIs valuing colocation. What about zero-runtime CSS-in-JS? It blends authoring DX with build-time output.

ONE CONCRETE EXAMPLE A Button styled with CSS Modules imports a class that the bundler renames to a hashed string; the shipped CSS is static and the runtime does nothing extra. The same Button in Styled Components defines styles in JS that read a primary prop to switch color at runtime; the dynamic theming is effortless but the library injects styles as the component renders, adding runtime work the CSS Modules version avoids.