local-scope.md

CSS Modules — Local Scope

CSS Modules have class selectors scoped locally by default. For example, the following classes backdrop, prompt & pullquote are local to that file.

.backdrop {
}
.prompt {
}
.pullquote {
}

They do not pollute the global namespace, so you're free to use any name you like. You compile them by importing or requiring them in your JavaScript file.

import styles from './style.css';

export function Component(props) {
  return (
    <div className={styles.backdrop}>
      <div className={styles.prompt} />
      <div className={styles.pullquote} />
    </div>
  );
}

Note: These examples use React syntax, but of course it's not tied to React in any particular way.