0Pricing
CSS Academy · Lesson

CSS Modules: Scoped Styles

Automatically scope class names locally to components using CSS Modules in your build setup.

What are CSS Modules?

CSS Modules automatically scope CSS class names to the component file they are defined in. Each class name is transformed to a unique identifier at build time — preventing global style leakage.

File Convention

Name your CSS file with .module.css (or .module.scss for Sass):

/* Button.module.css */
.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

All lessons in this course

  1. Styled-components: Tagged Template Literals
  2. Emotion: css() and styled()
  3. CSS Modules: Scoped Styles
  4. Vanilla Extract: Zero-Runtime CSS-in-JS
← Back to CSS Academy