Download - CSS-in-JS - Andrii Los (20.10.2017)
![Page 1: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/1.jpg)
I'm Andrii Los,
Frontend Engineer at ITV Project
π
GitHub: RIP21 Twitter: @RIP212
![Page 2: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/2.jpg)
πCSS-in-JS π Styling for component era web
![Page 3: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/3.jpg)
π© Problems of CSS
π€ How they were addressed
π CSS-in-JS features
π€βοΈ CSS-in-JS F.A.Q and its problems π©
π Future of CSS-in-JS
![Page 4: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/4.jpg)
Problems of CSS π©
π© Designed for documents not apps
π© Globally scoped
π© Hardly reusable
π© Leaking
π© Non-programmatic
π© Non-modular
π© CSS develops too slow
![Page 5: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/5.jpg)
How they were addressed π€
π€ LESS
π€ PostCSS
π€ SASS
π€ Stylus
π€ CSS Modules
π€ All above with Webpack loaders and plugins
![Page 6: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/6.jpg)
What problems were
preserved? π©
π© Non-modular out of the box
π© Still not componentized enough
π© Require a lot of class names manual work
π© Still global and can leak
π© Reusability still not perfect
![Page 7: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/7.jpg)
So what if we would like to
fix them all in one ultimate
solution? π€
![Page 8: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/8.jpg)
π
Glorious
CSS-in-JS!
π
![Page 9: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/9.jpg)
CSS-in-JS
π styled-components
π©π€ emotion
π glamorous
![Page 10: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/10.jpg)
CSS rules definition
π Template string literals
π Object React inline-styles notation
π©π€ Supports both
![Page 11: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/11.jpg)
So what the possibilities?
π Media queries
π Keyframes
π Pseudo classes
π Nested selectors
π It's JS, so you have all its power
π Babel and Webpack optimisations for production
π Total isolation if old global CSS approach is not used
π Easy theming support
![Page 12: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/12.jpg)
So what the possibilities?
π Full interoperability with existent CSS
π Inject global styles if you know what you are doing
π Full support for styling 3rd parties components
π Extend API for easily reuse styles
π react-primitives - React Native, React Sketch, etc.
π Endless of other powerful things that you can
come up with
![Page 14: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/14.jpg)
What's the problems? π©
![Page 15: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/15.jpg)
π© Weak editors support?! It's just strings and objects!
π Nope! Webstorm, VS Code, Sublime Text, Atom support is there!
π© Formatting! I sure it's just highlights the text, but no formatting!
π Nope! Webstorm formats it perfectly. (Not sure about others though)
π© Meh! Then I won't use!
π Editors doesn't matter. Prettier is formatting CSS in template literals ;)
π© But we don't use it!
π€βοΈ What's wrong with you?! It's amazing!
π© I'm not impressed yet..... I need something. It's stupid to have CSS in JS!
π€·βοΈ Okay, but what did you were saying about JSX a few years ago π€
π© PERFORMANCE!
![Page 16: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/16.jpg)
Well, you are a little correct π©
π© styled-components performance in unrealistic
benchmarks is very weak
π Good news. Emotion and glamorous have bench
performance only 5-10% slower than CSS Modules
π Real world apps performance is good for all
solutions
π There is a hacks to improve it even further if so
needed
![Page 17: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/17.jpg)
So, what you would
recommend?styled-components π
![Page 18: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/18.jpg)
Why?
π 11000 stars on GitHub, means lots of contributions
π Supports React Native and other renderers
π Amazing Jest and other test runners support
π A lot of tooling is already done for it
π Stylelint support (works for emotion as well)
π The best documentation
π Better performance - matter of time
![Page 19: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/19.jpg)
Future of CSS-in-JS
π€ ISTF - Interoperable Style Transfer
Format (Even further performance
improvement, CSS-in-JS styles interop)
π€· Extreme styles optimisations to reduce
amount of CSS code up to 30-60%
(depends on codebase size)
![Page 20: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/20.jpg)
![Page 21: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/21.jpg)
That's all folks! πGitHub: RIP21 Twitter: @RIP212
![Page 22: CSS-in-JS - Andrii Los (20.10.2017)](https://reader031.vdocuments.site/reader031/viewer/2022020108/5a649d3d7f8b9a5d568b4e45/html5/thumbnails/22.jpg)
List of links and resources π
β’ Sandbox for this speech
β’ A unified styled language @markdalgleish - MUST READ (pick on
CSS-in-JS by co-author of CSS Modules)
β’ styled-components documentation
β’ emotion documentation and full of perf demos of emotion in its
authors twitter
β’ glamorous documentation
β’ Amazing article about styled-components future and CSS-in-JS in
overall by one of the authors of s-c
β’ Template string literals or Object notations, what to choose? Read
that