SCSS Modules and Component Style Isolation

CSS Modules scope class names locally to a module and expose generated class-name mappings to JavaScript. SCSS Modules combine this isolation model with Sass preprocessing.

A component can import a file such as Button.module.scss and reference the generated class names through the imported object. This reduces accidental global class-name collisions and makes component ownership clearer.

Global resets and theme tokens may still be shared through deliberate global styles or Sass modules. Keep global side effects out of ordinary component modules when possible.

CSS Modules and Sass modules are different concepts: Sass modules organize Sass code and its public members, while CSS Modules provide locally scoped CSS class names through a build-tool integration.

Button.module.scss

.button {
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

.primary {
  color: white;
  background: #2457c5;
}

.danger {
  color: white;
  background: #c62828;
}

💡 The Sass compiler processes this stylesheet, and the CSS Modules integration creates locally scoped class names. The JavaScript import exposes those generated names through the styles object. This approach is useful when a component should own its styling without relying on globally unique hand-written class names.

Knowledge Check

What is the primary purpose of a CSS Module?

SCSS Modules and Component Style Isolation

STAY UPDATED WITH BYTES!