CSS Modules
0 likes641 views
This document discusses CSS Modules, a tool that allows for local scoping of CSS styles and prevents conflicts from globally scoped CSS. CSS Modules is supported out of the box with Webpack and generates unique class names to avoid collisions. It also supports theming components by changing class names and can be used for server-side rendering with a require hook for CSS Modules.
1 of 32
Download to read offline
CSS Modules
- 2. Better language LESS, SASS, STYLUS
- 3. Better CSS OOCSS, BEM, SMACSS
- 4. GLOBAL STYLES ARE PURE EVIL
- 5. CSS MODULES
- 6. What is CSS Modules? Framework?, - No. Library?, - No. Special language?, - No.
- 7. Webpack gives you CSS Modules for free
- 9. EXAMPLES
- 10. Original CSS Generated by CSS Modules
- 11. Original CSS Generated by CSS Modules
- 12. Original CSS Generated by CSS Modules
- 13. Really easy to use...
- 14. ...or in React
- 15. Webpack is magic
- 16. More magic for Production
- 17. Original CSS Obfuscation for free
- 18. WHAT ABOUT GLOBAL STYLES?
- 19. PostCSS
- 20. EXAMPLES
- 24. Blue theme
- 25. White theme
- 26. Landing theme
- 28. SERVER RENDERING
- 30. server/index.js