CSS in JS: My favorite

Today's the stunning conclusion to our 3 part voyage into the land of CSS and web applications.
Today we're talking about CSS in JS! What is it? Where did it come from? What can you do with it?
First half of the episode gives you a background into the history of CSS-in-JS and how it changed over time.
Second half of the episode is a live demo of migrating from CSS Modules to CSS-in-JS.
Have a watch!
Part 2, CSS Modules: • CSS Modules: Why are t...
Part 1, Intro: • Voyage into CSS Part 1...
Show links:
React: CSS in JS - Speaker Deck
speakerdeck.com/vjeux/react-c...
Style · React Native
facebook.github.io/react-nati...
tuchk4/awesome-css-in-js: Awesome CSS in JS articles / tutorials / videos / benchmarks / comparision
github.com/tuchk4/awesome-css...
JSS
cssinjs.org/?v=v10.0.0
threepointone/glamor: inline css for react et al
github.com/threepointone/glamor
styled-components
www.styled-components.com/
polished | Documentation
polished.js.org/docs/#rgba
callstack/linaria: Zero-runtime CSS in JS library
github.com/callstack/linaria
Single File Components - Vue.js
vuejs.org/v2/guide/single-fil...
Emotion - Introduction
emotion.sh/docs/introduction
--
PATREON: / hswolff
TWITTER: / hswolff
SITE: hswolff.com/
NEWSLETTER: tinyletter.com/hswolff/subscribe

[@maciekdzikdrums]

Good Job Harry ;) Love the history of CSS component to it !!

[@titogoda]

I love the way you make videos and I learn a lot from you. Thanks Harry :)

[@hswolff]

Yay! So glad to hear!

[@nickfausti6194]

Fantastic explanation! Thank you.

[@theoligarchist1503]

great video. am planning to use CSS in rust stdweb, thats how i got to this video. very few people are doing this.

[@maymumk3618]

Very good video harry!! Please keep up this great job 👌🏼👌🏼 i hope that you will cover styled-system and point the goal to use it other than emotions. Thx again

[@hswolff]

Ooo styled system is a good one too. That whole world is so interesting to me.

[@kimduer6194]

Super useful! Thank you!

[@hswolff]

You are welcome!!

[@steve-g-]

Excellent video - thanks! Since styled-components has a css prop now as well is there any major difference between it and emotion?

[@ManasTunga]

Nice video Harry.

[@hswolff]

Thank you!

[@stefanbogdanovic590]

If I am working with styled components, I like to write styled in separate files, so I can focus on jsx more, some times it gets messy when you mix js jsx html css all in same file. I suggest that Should write styled components separately. Nicee video broo keep up the good work.

[@getmaxeddd]

I totally disagree. What is the point ? that's just extra work - importing from another file, also extra decision makings. What if your component file has only 1 or 2 styled components ? Do you really enjoy ALWAYS creating 2 files - index and style ? If so - you also have to always create folder for them. And at some point you'll have some style files that will have shared components -- you'll have 3 different Containers and Buttons in the same style file and you'll have to think how to name them. And you'll end up with BEM style prefixing. Why ? Nicely put your styled components below your jsx and that's it :)

[@hswolff]

Yep! I def think that’s a good strategy too! I tend to do that when my styles get very large. In general if a file gets longer than 600 lines that’s when I start to think about ways to make it smaller.

[@stefanbogdanovic590]

@@hswolff That's why I tend to make React work like Angular everything Should be in separate files. And thats soo nice, everytime you switch from html to js you are not thinking about writing html and soo. BTW I tried all of them and I know what I am talking. Have a nice Day Harry.

[@johncastorina8310]

Harry, if you haven't already, check out TailwindCSS. Different paradigm, and it has some serious benefits.

[@ethanliu4012]

Also check twin.macro , merged TailwindCSS into styled components or emotion , get benefit of both ,and more flexibility if you do not want to go 'all in' to tailwind .

[@adamtak3128]

How would you organize your code when using the styled components approach? I found my react file got pretty large pretty quickly and it was annoying as hell to have to scroll up and down across the file. I also couldn't really think of a good folder structure to organize the code/have reusable styles. Hopefully u can point me to some good references.

[@AdrianGonzalezBlogs]

I think the answer to this problem is just breaking each component into smaller and smaller components. I had exactly this same issue when adding styled components. This made me realize how much I could break my components into smaller ones.

[@JashwantSinghChaudhary]

Create directories for components. And put style in separate file. e.g. If you had header.jsx earlier then you would create a directory header with header.jsx code in index.jsx and styles in style.jsx. And then you can import styles in header.jsx from style.jsx. This way, you would not have to change the header.jsx import in other files as index.jsx can be mported by directory name only. You can refer this boilerplate www.reactboilerplate.com/

[@adnanrruka5152]

WOW!

[@moshemo613]

If I am only interested in making Styled Compoments in React, is there any advantage of Emotion over Styled Components? I personally don't have a need for their inline css function. Is there anything else that emotion can do that styled-components can't do?

[@hswolff]

Yeah Emotion also supports the css prop (emotion.sh/docs/css-prop), which styled component doesn't support at all.

[@twiggeh3577]

Hellu, very cool Video :) I wanted to ask how you got Emotion to work without needing /** @jsx jsx */ and import { css , **jsx** } from '@emotion/core' Whenever i try to do it like you showed it, it doesn't work :(

[@hswolff]

You need to use the babel plugin! Note: it will not work with create-react-app! emotion.sh/docs/@emotion/babel-preset-css-prop

[@twiggeh3577]

@@hswolff KZbin didn't give me a notification that you replied RIP Oh yeah I used create-react-app . I guess they lock out any customization for compatibility reasons. Thanks for the reply :)

[@nosnart9453]

Can you make a video about styled-system or rebass?

[@hswolff]

Thank you for the great suggestions! Added it to my list!

[@moshemo613]

+1 for a series of videos on styled-system and rebass

[@MrJailbreakdude]

I personally prefer the Material-UI styling solution. Passing common values for color , etc through context and being able to reference them in any descendant components in the makeStyles function. Although the CSS-in-JS library that Facebook showed off at React Conf looks amazing and I'll definitely switch to that when they release it to the open source community

[@AdrianGonzalezBlogs]

Yeah I saw that and can't wait for it to be released.

[@hswolff]

I think emotion provides that through their theme support too!

[@DanielRios549]

The cons of applying the styles using JS is the most problem about CSS in JS, I prefer using SCSS modules in place of all theses CSS in JS solutions you show in the video, but, Linaria is isteresting, tall he others have this problem, CSS should not be in JS files, where you write it doesn't matter, but in the build, it should be in the CSS files.

[@ropewalkingelephant]

Take a look at theme-ui

[@hswolff]

Yeaaaah theme-ui is verrrry coool.

[@moshemo613]

@@hswolff What can theme-ui do that styled-system and rebass can't do?

[@Rssks]

None of these solutions satisfies my vision of web component notation. Your video is good doe, don't get me wrong :)

[@hswolff]

haha i'll take it, thanks!

[@jayasurian123]

I would prefer css modules over these techniques. The html part would looks much cleaner i dislike seeing all these styles in the js code.

[@hswolff]

Fair enough! Gotta do what helps you the most!

[@angladephil]

Definitly : never. Js is dedicated to logic not layout or design. it's heretic to mix the two of them, especially in a team dev.