Recommended
More Related Content
What's hot
What's hot (11)
Similar to CSS-in-JS in React: Why, current state, and bright future.
Similar to CSS-in-JS in React: Why, current state, and bright future. (20)
Recently uploaded
Recently uploaded (20)
CSS-in-JS in React: Why, current state, and bright future.
- 1. I'm Andrii Los, Frontend Engineer at ITV Project 👋 GitHub: RIP21 Twitter: @RIP212
- 2. 💄CSS-in-JS 💅 Styling for component era web
- 3. 💩 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
- 4. Problems of CSS 💩 💩 Designed for documents not apps 💩 Globally scoped 💩 Hardly reusable 💩 Leaking 💩 Non-programmatic 💩 Non-modular 💩 CSS develops too slow
- 5. How they were addressed 🤖 🤖 LESS 🤖 PostCSS 🤖 SASS 🤖 Stylus 🤖 CSS Modules 🤖 All above with Webpack loaders and plugins
- 6. 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
- 7. So what if we would like to fix them all in one ultimate solution? 🤖
- 9. CSS-in-JS 💅 styled-components 👩🎤 emotion 💄 glamorous
- 10. CSS rules definition 💅 Template string literals 💄 Object React inline-styles notation 👩🎤 Supports both
- 11. 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
- 12. 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
- 13. Main features demo 🤖
- 14. What's the problems? 💩
- 15. 💩 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!
- 16. 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
- 17. So, what you would recommend? styled-components 💅
- 18. 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
- 19. 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)
- 21. That's all folks! 👋 GitHub: RIP21 Twitter: @RIP212
- 22. 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