HTML & CSS Interview Question #127

What are CSS Modules and how do they help prevent style conflicts?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

CSS Modules are a build-tool approach in which class names are locally scoped to a component or source module and transformed into generated unique names. They are commonly used with component-based JavaScript frameworks.

Detailed Explanation

CSS Modules are a build-tool approach in which class names are locally scoped to a component or source module and transformed into generated unique names. They are commonly used with component-based JavaScript frameworks.

Local scoping reduces accidental global class collisions and allows developers to use simple class names inside a component. CSS Modules are not part of the CSS language itself; they require compatible build tooling.

Code Example

/* ProductCard.module.css */
.card {
    padding: 1rem;
}

.title {
    font-weight: 700;
}

/* A build tool may generate unique class names
   for .card and .title. */