Modular CSS Classes and Elements

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: