An objective of modular CSS is to constrain styles to components. Globally styling elements like h1 is to be done sparingly. Instead we’re taught to use class syntax:

/* Component.module.css */
.header {
  color: purple;
}

// Component.tsx
import {styles} from './Component.module.css';

return (Component = () => {
  return (
    <section>
      <h1 className={styles.header}>A purple header here 💜</h1>
    </section>
  );
});

But, we can still style elements:

/* Component.module.css */
.section h1 {
  color: purple;
}

Wrapping h1 in a class means that our CSS is transpiled to something like this:

._section_1hpv5_1 h1 {
  color: purple;
}

The purple color only applies tour targeted h1 through inheritance.

Now, we don’t need a class on the header, or any other tag we nest in .section, which I think promotes a readable stylesheet as the component grows.

// Component.tsx
import {styles} from './Component.module.css';

return (Component = () => {
  return (
    <section className={styles.section}>
      <h1>A purple header here 💜</h1>
    </section>
  );
});