CSS Modules with PostCSS

Transcript

1. CSS Modules with PostCSS Why inline JS styling and Sass are not good enough
2. Typical Sass approach + | mixins, classes, functions, variables (eg. fast grid system working, manage media queries and z-indexes) | very helpful when properly used | a lot of libraries: Compass, Bourbon etc. - | global namespace | need to care what you really use (dead code elimination) | styling is not a permanent part of component (it just imitates this) | mixins libraries are not useful in long term (we want autoprefixer and polyfill for new functionalities at this moment)
3. Inline styling in React + | Isolation, no global namespace | All in one (JS) | Probably fine with React Native | Big community, a lot of libraries - Radium, React Style, jsxstyle (render css from JS...) - | Rendering performance | CSS is still developing - a lot of features hard in implementation | How to implement pseudo-classes, media queries (:hover, :after, +, ~, >, ::-webkit- input-placeholder) | manage dependencies, eg.: between child components class and parent comp. state | hard to overwrite styles eg. in Material UI (some tricks by decorators)
4. CSS Modules (nothing common with postcss!) + | All benefits inline JS styling | This is pure CSS | Works fine with Sass (and other pre/postprocessors) | React Toolbox vs. Material UI | Composes vs. @extends - | learning composes way of building styles
5. CSS Next / PostCSS (use custom post css solution instead of one big library) + | In PostCSS you use only tools which you really need | Pure CSS, forget about learning new mixins to support new browser | A lot of libraries (cssnext, nested, autoprefixer, variables, postcss modules...) | Write in new CSS now (variables, grid, functions) -