Good Job Harry ;) Love the history of CSS component to it !!
@titogoda4 жыл бұрын
I love the way you make videos and I learn a lot from you. Thanks Harry :)
@hswolff4 жыл бұрын
Yay! So glad to hear!
@DanielRios5492 жыл бұрын
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.
@stefanbogdanovic5904 жыл бұрын
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.
@getmaxeddd4 жыл бұрын
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 :)
@hswolff4 жыл бұрын
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.
@stefanbogdanovic5904 жыл бұрын
@@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.
@adamtak31284 жыл бұрын
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.
@AdrianGonzalezBlogs4 жыл бұрын
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.
@JashwantSinghChaudhary3 жыл бұрын
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/
@johncastorina83104 жыл бұрын
Harry, if you haven't already, check out TailwindCSS. Different paradigm, and it has some serious benefits.
@ethanliu40123 жыл бұрын
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 .
@theoligarchist15034 жыл бұрын
great video. am planning to use CSS in rust stdweb, thats how i got to this video. very few people are doing this.
@nickfausti61943 жыл бұрын
Fantastic explanation! Thank you.
@steve-g-2 жыл бұрын
Excellent video - thanks! Since styled-components has a css prop now as well is there any major difference between it and emotion?
@moshemo6134 жыл бұрын
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?
@hswolff4 жыл бұрын
Yeah Emotion also supports the css prop (emotion.sh/docs/css-prop), which styled component doesn't support at all.
@maymumk36184 жыл бұрын
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
@hswolff4 жыл бұрын
Ooo styled system is a good one too. That whole world is so interesting to me.
@twiggeh35774 жыл бұрын
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 :(
@hswolff4 жыл бұрын
You need to use the babel plugin! Note: it will not work with create-react-app! emotion.sh/docs/@emotion/babel-preset-css-prop
@twiggeh35774 жыл бұрын
@@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 :)
@kimduer61944 жыл бұрын
Super useful! Thank you!
@hswolff4 жыл бұрын
You are welcome!!
@ManasTunga4 жыл бұрын
Nice video Harry.
@hswolff4 жыл бұрын
Thank you!
@nosnart94534 жыл бұрын
Can you make a video about styled-system or rebass?
@hswolff4 жыл бұрын
Thank you for the great suggestions! Added it to my list!
@moshemo6134 жыл бұрын
+1 for a series of videos on styled-system and rebass
@adnanrruka51523 жыл бұрын
WOW!
@jayasurian1234 жыл бұрын
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.
@hswolff4 жыл бұрын
Fair enough! Gotta do what helps you the most!
@MrJailbreakdude4 жыл бұрын
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
@AdrianGonzalezBlogs4 жыл бұрын
Yeah I saw that and can't wait for it to be released.
@hswolff4 жыл бұрын
I think emotion provides that through their theme support too!
@ropewalkingelephant4 жыл бұрын
Take a look at theme-ui
@hswolff4 жыл бұрын
Yeaaaah theme-ui is verrrry coool.
@moshemo6134 жыл бұрын
@@hswolff What can theme-ui do that styled-system and rebass can't do?
@Rssks4 жыл бұрын
None of these solutions satisfies my vision of web component notation. Your video is good doe, don't get me wrong :)
@hswolff4 жыл бұрын
haha i'll take it, thanks!
@angladephil2 жыл бұрын
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.