CSS Modules versus BEM for encapsulation

WHAT THIS TESTS The question probes whether you understand the difference between enforced scoping and conventional scoping, and the workflow consequences of each.

A GOOD ANSWER COVERS CSS Modules solve encapsulation at build time. You author normal class names, and the bundler rewrites them to unique hashed identifiers like Card_title__a1b2c, then exposes a mapping you import into your component. Collisions become structurally impossible because every module gets its own namespace. BEM solves the same problem through human discipline: a naming grammar of block, block__element, and block--modifier that makes names long and specific enough to avoid clashes. Crucially BEM produces plain global classes with no transformation, so two developers who reuse the same block name can still collide.

COMMON WRONG ANSWERS Saying BEM gives true encapsulation; it only gives collision-resistance by convention. Saying CSS Modules need no build tooling; they require a bundler step. Treating them as mutually exclusive; teams sometimes write BEM-style names inside CSS Modules for readability.

LIKELY FOLLOW-UPS Which debugs more easily? BEM, because the class in the DOM matches your source; CSS Modules show hashed names unless you configure readable dev hashes. How does each affect bundle output? CSS Modules can dead-code-eliminate and locally optimize; BEM ships exactly what you write. What about specificity? Both typically keep specificity flat with single classes, which is a shared strength. How do they handle theming? Both rely on custom properties for runtime theming since neither changes the cascade itself.

ONE CONCRETE EXAMPLE A .title class in two BEM files, card__title and modal__title, stays distinct by convention, but a careless .title in both files would clash globally. With CSS Modules, two files can both export .title; the bundler emits Card_title__x and Modal_title__y, so they never collide even with identical authored names. That structural guarantee, versus discipline, is the core distinction to articulate.