CSS Modules helps you create independent and customized cascading style sheets for any .js file rendering HTML in your React application. If you are beginning to learn React and find yourself creating small projects you won't have any issue getting all your CSS code from a main file: Image 1: Basic Project Structure (All CSS code is exported from './css/style.css') Here we have a simple React project structure for a simple application which doesn't require a big amount of styling, given the fact that is only composed by and containers and a main component the best and simpler way to import the CSS code to style it would be from just the file. user_list.js user_details.js App.js style.css So... what happens when your application gets bigger and you need to start styling a considerable amount of components? You will realize managing multiple selectors from several files into just one is not the ideal solution. You will run into problems managing unique ids, classes and tag elements for each individual file so they dont end up overriding each other, here's where enter the game: CSS style.css CSS Modules Image 2: CSS Modules Structure (Each component has its own CSS styling module) Modular CSS gives you the advantage of importing to each individual React component by passing the ' ' object with the mapped properties of its own file. CSS styles CSS Let's take a look at the Book component: Image 3: Book Component Image 4: Book CSS Module As you can see in the above example, all we need to do is a simple import: styles ; import from './ComponentName.module.css' Then, we can access every property with the styles object : Hello World < = > div id {styles.mainContainer} < = > h1 className {styles.blueHeader} </ > h1 </ > div *It's suggested to use camelCase for CSS selectors in order to avoid unexpected behaviors. Composing from other CSS modules: It's also possible to import another CSS module to compose mixed properties: { : bigBox from ; : green; } .bigGreenBox composes "./style.css" background-color Conclusions React CSS Modules offers local CSS scoping for every component. CSS Modules export an object with all CSS mappings from that particular file. CSS Modules provide the advantage of avoiding conflicts between CSS selectors. Links CSS Modules Docs Webpack Info NPM CSS Modules If you made it this far i hope this article helped you in one way or another, thanks for reading!
