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