How do CSS Modules differ from Vue scoped CSS?

What's really being asked

This question tests whether you understand the difference between build-time class hashing and compiler-level attribute scoping, and whether you know the practical template syntax for CSS Modules in a Vue context. Interviewers care that you see CSS Modules as a framework-agnostic build-tool contract that produces a mapping object, while Vue scoped styles are a framework-specific compiler feature.

The full answer

First, explain the CSS Modules contract. A CSS Module is processed by a build tool so that every class name becomes a globally unique hashed string. The loader exports a JavaScript object where keys are your original local names and values are the generated global class strings. You import that object and reference properties to apply classes. Second, contrast this with Vue scoped CSS. Vue's compiler adds a unique data-attribute, such as data-v-abc123, to every element in the component template and rewrites the style block so each selector targets only elements with that attribute. Third, highlight the practical differences. CSS Modules are portable across React, Vue, or vanilla projects because they rely only on a bundler loader. Vue scoped CSS is tightly coupled to the Vue compiler and Single File Component system. Fourth, show the template code. In a Vue file using CSS Modules via the module attribute on the style block, you bind classes with div v-bind:class="$style.myClass". Alternatively, if you import the module manually in script setup, you bind the imported object's properties directly. For Vue scoped CSS, you use the scoped attribute on the style block and ordinary class names because the compiler handles the scoping automatically.

The mistakes people make

Claiming that CSS Modules work by adding a data-attribute like Vue scoped CSS. Describing CSS Modules as just a naming convention like BEM instead of a build-time transformation. Forgetting that CSS Modules expose an explicit mapping object and instead treating the import as a side-effect. Saying Vue scoped CSS hashes the class names rather than using attribute selectors. Giving template syntax like class="styles.button" without a binding directive in Vue.

What usually comes next

When would you prefer CSS Modules over Vue scoped styles in a Vue application? How do you handle global styles or exceptions in either system? Can you use CSS Modules and scoped styles together? How does composition work in CSS Modules using composes?

A concrete example

Imagine a Button.vue component. With CSS Modules, you write style module, define .button { color: blue; }, and in the template use button :class="style.button". The compiled output replaces style.button with a hashed class like Button_button__3x7a2. With Vue scoped CSS, you write style scoped, define .button { color: blue; }, and use button class="button". The compiler rewrites the CSS to .button[data-v-1a2b3c4] and injects data-v-1a2b3c onto the button element.