Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
GEORGE BUKHANOV
@NothernEyes
northerneyes
Better language
LESS, SASS, STYLUS
Better CSS
OOCSS, BEM, SMACSS
GLOBAL STYLES ARE PURE EVIL
CSS MODULES
What is CSS Modules?
Framework?, - No.
Library?, - No.
Special language?, - No.
Webpack gives you CSS Modules for free
NO GLOBAL CSS
EXAMPLES
Original CSS Generated by CSS Modules
Original CSS Generated by CSS Modules
Original CSS Generated by CSS Modules
Really easy to use...
...or in React
Webpack is magic
More magic for Production
Original CSS Obfuscation for free
WHAT ABOUT GLOBAL STYLES?
PostCSS
EXAMPLES
THEMEABLE COMPONENTS
Blue theme
White theme
Landing theme
One more thing...
SERVER RENDERING
CSS-MODULES-REQUIRE-HOOK
server/index.js
CSS Modules config
FIN
@NothernEyes
northerneyes
CSS Modules
CSS Modules
Upcoming SlideShare
Loading in …5
×

CSS Modules

288 views

Published on

Talk is about css/sass/scss common problems and how CSS Modules can easily solve it for you

Published in: Software
  • Be the first to comment

  • Be the first to like this

CSS Modules

  1. 1. GEORGE BUKHANOV @NothernEyes northerneyes
  2. 2. Better language LESS, SASS, STYLUS
  3. 3. Better CSS OOCSS, BEM, SMACSS
  4. 4. GLOBAL STYLES ARE PURE EVIL
  5. 5. CSS MODULES
  6. 6. What is CSS Modules? Framework?, - No. Library?, - No. Special language?, - No.
  7. 7. Webpack gives you CSS Modules for free
  8. 8. NO GLOBAL CSS
  9. 9. EXAMPLES
  10. 10. Original CSS Generated by CSS Modules
  11. 11. Original CSS Generated by CSS Modules
  12. 12. Original CSS Generated by CSS Modules
  13. 13. Really easy to use...
  14. 14. ...or in React
  15. 15. Webpack is magic
  16. 16. More magic for Production
  17. 17. Original CSS Obfuscation for free
  18. 18. WHAT ABOUT GLOBAL STYLES?
  19. 19. PostCSS
  20. 20. EXAMPLES
  21. 21. THEMEABLE COMPONENTS
  22. 22. Blue theme
  23. 23. White theme
  24. 24. Landing theme
  25. 25. One more thing...
  26. 26. SERVER RENDERING
  27. 27. CSS-MODULES-REQUIRE-HOOK
  28. 28. server/index.js
  29. 29. CSS Modules config
  30. 30. FIN @NothernEyes northerneyes

×