thanks dude, I really like this video because it gives you an overview of everything allowing you to make a more informed decision of what to learn next :)
The author fails to mention the cons of styled components which are several - if you work in large performant sites it's not really an option. Look up how styled components are actually rendered in the web page.
Much appreciate your help in making me understand modern day CSS comparatively. No doubt, modern day styling and tooling around it overwhelm backend developers. Pretty well explained! (BTW, subscribed and liked)
What if I'm a developer with zero design feeling. I want to let a designer style my app. He's an HTML/CSS wizard. But knows squat about JS/react. The designer would have a hard time with this approach right? I'm more a fan of separation of concerns.
What's your current way to go? Right now I'm writing my CSS using Styled Components but I'm wondering if I shouldn't move on to Linaria. What's your opinion about it?
I'm just starting out a career in web dev I already have learn the MERN Stack and now I in the middle of building a project, I mostly finished the Nodejs server, now I found your TH-cam video I have build a react apps before, but I was looking for a faster way to build the ui, and I need some eyes on code, so can you be my mentor?
It was hard to catch what you were actually doing in some parts of the video (like how you were implementing tailwind within the app)... also, practice removing 'umm' and 'but' from your delivery (i'm horrible at that myself) and speak with more confidence (you know what your doing, but your vocals say otherwise)... Thx for the post!
Thank you so much for this video. Great content Please correct me if I didn't gather it correctly about Linaria and Complied: Compiled and Linaria take ALL the CSS out from ALL the JS files and make it ONE GIANT CSS file at BUILD TIME. Later on at RUNTIME, EACH component ONLY imports the CSS from that ONE GIANT file, that that PARTICULAR component is using. Is this correct?
Yes, that's how it works. It's been a while since I used it, so I'm not sure if it builds the CSS into one giant file or serveral files at build time, but you can look into the build folder and see for yourself.
@@EricMurphyxyz Thank you so much Eric. What would you suggest is best of all for React styling? Linaria, Styled Components, Tailwind or some other library?
@@hugodsa89 The key with Tailwind is to define the various values in a central location. The whole point is that it helps keeps things consistent across your site. So say your main brand color is teal. With normal Styled Components, you would have a load of components across the board with various bits being in Teal. Now your marketing manager decides that the brand color is now going to be gold. You now have to go through each component to change the teal over. But what if it's just certain parts which are to be gold, and some of the teal is going to stay? This adds to the cognitive load to update the site, as you need to figure out the role of each component. Mistakes can easily happen here. With Tailwind, you define the colors in one file, giving them a name which says what their role is. So maybe `primary-brand-500` and `secondary-brand-500`. Perhaps both of these are teal in the first example, and so your components are then just using this color. Then when marketing decides you're going gold, you just change `primary-brand-500` to gold, but keep `secondary-brand-500` as teal. Job is now done and no mistakes are made. Tailwind can become messy and unmaintainable, absolutely. But this usually suggests that either you're not pulling out the standards into a base file, or you aren't breaking the site up into atomic components.
When sass perfectly solved almost all css problems and people still try to reinvent the wheel.
I washing trouble deciding how to style my react app and this was a very comprehensive video explaining my options! Thank you!
Love Tailwind and Styled Components
Great tutorial. Bravo!
I tried Material UI and didn't like how locked down it was. I then tried Styled components and fell in love!!
thanks dude, I really like this video because it gives you an overview of everything allowing you to make a more informed decision of what to learn next :)
Thanks bro. This video was extremely helpful
I had no idea styled components was a thing. And now my life is changed.
It's pretty awesome
The author fails to mention the cons of styled components which are several - if you work in large performant sites it's not really an option. Look up how styled components are actually rendered in the web page.
I stand corrected - he did mention it in min 11
Much appreciate your help in making me understand modern day CSS comparatively. No doubt, modern day styling and tooling around it overwhelm backend developers. Pretty well explained!
(BTW, subscribed and liked)
super helpful thank you
What if I'm a developer with zero design feeling. I want to let a designer style my app. He's an HTML/CSS wizard. But knows squat about JS/react. The designer would have a hard time with this approach right? I'm more a fan of separation of concerns.
What's your current way to go? Right now I'm writing my CSS using Styled Components but I'm wondering if I shouldn't move on to Linaria. What's your opinion about it?
for building web apps, i prefer css in js like emotion or sc
Thank you so much for this video.. :)
Great comparison and clarification! Thanks
Didn't know about twin.macro, pretty much solves what I was looking for. Thanks!
Thanks that was a great video, it's really helpful.
Thanks, glad you found it helpful!
I'm just starting out a career in web dev I already have learn the MERN Stack and now I in the middle of building a project, I mostly finished the Nodejs server, now I found your TH-cam video I have build a react apps before, but I was looking for a faster way to build the ui, and I need some eyes on code, so can you be my mentor?
Really good info. Thank you!
Please show how to setup and use Linaria... no resources at all on TH-cam
So styled components and linaria? does linaria work with create-react-app?
Super Awesome Tutorial ++++++++++ Thank you 🙂🙂
We used to use module SCSS. What do you think about it?
SCSS is good, probably should have mentioned it in the video! Works great with CSS modules
@@EricMurphyxyz killer feature ;))
TailwindCSS (at least from v2.0) incorporates postCSS by default, isn't that accomplishing the same thing as what linaria offers?
It was hard to catch what you were actually doing in some parts of the video (like how you were implementing tailwind within the app)... also, practice removing 'umm' and 'but' from your delivery (i'm horrible at that myself) and speak with more confidence (you know what your doing, but your vocals say otherwise)... Thx for the post!
Thanks! I think in my new videos I'm a bit clearer and use less umms, it's a bad habit for sure
bros the goat
🐐
Hey murphy, i really like the background you used for vscode, can you give me a name of a theme?
It's the Tokyo Night theme
Thank you so much for this video. Great content
Please correct me if I didn't gather it correctly about Linaria and Complied:
Compiled and Linaria take ALL the CSS out from ALL the JS files and make it ONE GIANT CSS file at BUILD TIME. Later on at RUNTIME, EACH component ONLY imports the CSS from that ONE GIANT file, that that PARTICULAR component is using.
Is this correct?
Yes, that's how it works. It's been a while since I used it, so I'm not sure if it builds the CSS into one giant file or serveral files at build time, but you can look into the build folder and see for yourself.
@@EricMurphyxyz Thank you so much Eric. What would you suggest is best of all for React styling? Linaria, Styled Components, Tailwind or some other library?
@@Atif1702 Personally I like styled-components the best
@@EricMurphyxyz Thanks man 😉
thank you so much
Excellent tutorial sir. Very very clean and understandable
what is the name of your vs theme
Tokyo Night!
@@EricMurphyxyz thanks 😊
Thanks!
IMO styled components are more maintable
That Tailwind with styled components was really cool
Not sure whether maintainable though
I agree, would not personally use the tailwind with styled components, but cool to have it as an option
tailwind is basically going back to bootstrap days yuck
@@hugodsa89 its better imo
@@hugodsa89 The key with Tailwind is to define the various values in a central location. The whole point is that it helps keeps things consistent across your site. So say your main brand color is teal. With normal Styled Components, you would have a load of components across the board with various bits being in Teal. Now your marketing manager decides that the brand color is now going to be gold. You now have to go through each component to change the teal over. But what if it's just certain parts which are to be gold, and some of the teal is going to stay? This adds to the cognitive load to update the site, as you need to figure out the role of each component. Mistakes can easily happen here.
With Tailwind, you define the colors in one file, giving them a name which says what their role is. So maybe `primary-brand-500` and `secondary-brand-500`. Perhaps both of these are teal in the first example, and so your components are then just using this color. Then when marketing decides you're going gold, you just change `primary-brand-500` to gold, but keep `secondary-brand-500` as teal. Job is now done and no mistakes are made.
Tailwind can become messy and unmaintainable, absolutely. But this usually suggests that either you're not pulling out the standards into a base file, or you aren't breaking the site up into atomic components.
@@deanolium or you could use css variables with styles components, fixed
You're funny
Excellent tutorial sir. Very very clean and understandable