I'm Andrii Los,

Frontend Engineer at ITV Project

👋

GitHub: RIP21 Twitter: @RIP212

💄CSS-in-JS 💅Styling for component era web

💩 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

Problems of CSS 💩

💩 Designed for documents not apps

💩 Globally scoped

💩 Hardly reusable

💩 Leaking

💩 Non-programmatic

💩 Non-modular

💩 CSS develops too slow

How they were addressed 🤖

🤖 LESS

🤖 PostCSS

🤖 SASS

🤖 Stylus

🤖 CSS Modules

🤖 All above with Webpack loaders and plugins

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

So what if we would like to

fix them all in one ultimate

solution? 🤖

💄

Glorious

CSS-in-JS!

💅

CSS-in-JS

💅 styled-components

👩🎤 emotion

💄 glamorous

CSS rules definition

💅 Template string literals

💄 Object React inline-styles notation

👩🎤 Supports both

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

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

Main features demo 🤖

What's the problems? 💩

💩 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!

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

So, what you would

recommend?styled-components 💅

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

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)

That's all folks! 👋GitHub: RIP21 Twitter: @RIP212

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