CSS scoping can be handled with CSS modules, not just styled-components. Scoping styles to a human-readable wrapper class, as shown in your SASS example, is fragile because you may still cause a name collision and every component is now required to have a wrapper class to scope it's inner styles. I'm not fully convinced of styled-components because: a) it mixes CSS and JS which is not modular and it's React-only syntax. tech changes all the time and it'll be harder to separate the two b) it mixes CSS and JS AND HTML: you specify the HTML tag as part of the styled-component which adds another abstraction layer and makes it harder to read e.g. imagine you're reading JSX and you see , ok so it's a header tag, right? Actually it could be a header, h1, h2, h3, p, etc. and the developer is forced to dig an extra layer to find out what is the semantic tag EDIT: logically incorrect and clickbait video title, don't sink to the level of shitty devs on TH-cam. I usually like your videos, keep it up :)
Absolutely not. This was the case 3-4 years ago. Then we as a community learned styled-components is a major source of performance issues with re-renders and js execution time. If your code is SEO vital, styled components is going to harm you for Core Web Vitals. You are much better off with CSS Modules and/or Tailwind.
I'm a newbie , so can you explain further? Aren't styled components rendered only when needed? How does that harm the web vitals? For a big project should we use CSS or Styled components?
@@kart1372 It renders each time new component is found in the code and pauses current process to do it. So it requires longer load time and the site becomes extremely heavy the more you depend on it. Though I think there was a way to delay or preprocess the rendering final product... Like html has preloading for images or other files as if they are part of background process. React server -> pages -> page change, process at pc or ask server for component changes -> repeat until all loaded. Basically on older pc you see white screen flash and components move in order as the page continues to load. It still takes longer than a static page rendering with browsers. Normal html, css and no js executions to change content. I'd rather ask the information for preview from server. Rather than ask how it is previewed and then ask for the information. I did some react, I prefer static pages, but it was fun doing a point calculator for card game with component attributes. I cant say it is a waste to learn react as you can think a way to do it with other type of js script later, like by simply search and access elements, which to fill with the new information, using just normal js.
It's an interesting approach, and for small projects I can see this as adding value if you don't want to manage less/sass. I'll add to some of the concerns - * If you're working on a larger application on a team, building components that might need to be styled differently based on which page and what context they're in, the users of those components could find themselves fighting styles added via styled-components (without an easy remedy) * At enterprise size, switching one theme for another could be more challenging, since it would/could mean touching css in a whole lot of places. * If you have a "mixed render" scenario (say you're white-labeling a 3rd party site that's embedded or a step-through with redirect back to your site) exporting styles in a consistent way is more difficult * in all of the above scenarios you might want to style elements/components that are several layers down the html tree. If this supports a less/sass style syntax it could be ok, but if not you'll be managing styles in two places - that'd be bad. So, at first blush, probably well suited to smaller pure-react applications with few/no integrations and very small teams that don't work with others. In more complex scenarios... need to play with it to see if there are mitigations to the above.
Eh - it's neat but I think I'd prefer creating class selectors in the stylesheet... I imagine what you've shown would be useful for small projects, but what if a big team is working on this? They'd have to find all the little places where you've created the consts if they want to change the styling. Thank you for showing us as always, and great video!
Bear in mind this is a React only solution anyway. In a normal React project, components are their own files (usually). So changing component style just means opening the file and changing it. The strength of this is bigger as the team size grows.
I think the key here is separation of component libraries and themes from frontend application code. You want that single global profile layout style, and you don't want to go find and change all 1000 individually styled buttons with a duplicated font size attirbute, but at the same time, every consumer of your library will have its own unique complexity, so you probably can't account for everything in your component library, and ad-hoc styling is a must. As long as those two things are separate, you dodge the maintenance overhead of defining styles on a component-by-component basis and get the best of both worlds.
I would love to see a more in depth tutorial about styled components from you. But in the several videos I've watched trying to learn it, I learn more from you than all those other videos and in only 7 minutes
The company I just started at uses these for our product and I'm glad you made a video on this! I was wondering where the funky class names were coming from, I figured it might've been something with our bundler.
Appreciate the video. But why not using sass as module? It is solving all sass/css downsides mentioned in this video and also giving same or more flexibility with less boilerplate and also with a very less learning curve. In addition to that, Styled Components also creating a conflict with the props usage as you would be using the props both passing the react props and also styles components props.
For those who liked the idea of css-in-js and think it's not possible for a framework like Angular. You could use emotionjs which is a css-in-js library that is framework agnostic. 🔥
IMHO...styled components are more segregated in the code and have more "readability" for those who are old time CSS people. 1/styled components, 2/tailwind. Thanks
Tailwind is a pleasure to write, but not to read. It also lacks the features that makes Styled Components great like the ability to make extensible design systems. Tailwind is good for prototyping and small projects that don't change much, but horrible for use on a real team.
One question, the problem with specificity is not solved with css modules? I'm using emotion usually (it's basically almost the same as styled components), but i always wondered if the approach with css modules would solve the same problems and it's css by default so it's easier to disattach from the js file (if the component is too large sometimes it's better to separate styles in another file i think). You could create another file for the styles in js but it's strange for me. Great video by the way!
In the end it's the same shit and just a different way to do it. This makes sense when working with a JS framework but it's lame to claim that this is "the only way to do CSS" where for most projects this is just cruft.
@@EngineerMan React, MUI and styled components are probs one of the best matches out there. Super powerful, reliable, robust throughout the whole codebase regardless how large, and a delight for the developer writing/reading the code. Have not encountered a single thing I couldn't do with these things, throw formik and yup in the mix as well for clean and robust form handling.
Styled components is a great solution, way better than Tailwind... I can't see why people are so into that trend. Tailwind is for people that don't really care about CSS much. Anyway.. I would prefer to have a separate file for my styles but it's doable with styled components and I like that you can easilly pass props and use them directly in your rules. Although, you can do the exact same thing with CSS Modules and you can pass the "props" as classes or CSS variables. Plus you can use SCSS in your modules... so many nice color functions mixins etc. (I know there is polished for styled components). I also happen to prefer the class naming in CSS modules, way more friendly in the eye. CSS modules and Styled Components they have some similarities and recently vanilla extract css kinda merged those worlds and by the of Greysk... eehh sorry I mean Typescript we get to have a typed version of CSS Modules.. pretty neat. To be honest though in most of my projects, CSS Modules seems the right way for me.
Personally I would not use React, because its way to complicated.. Svelte is the way to go, including Tailwind CSS and you have the perfect setup nowadays
The idea was doomed from the start, JS performance on mobile devices is very poor especially on Android devices. You're better off by using vanilla css modules. Don'tforget that Google crawlers use the mobile view to benchmark your website! Not surprising since 70% of web traffic are from mobile devices, and this number will continue to grow.
How do you click on links that are obviously malicious, but without getting hacked? Like in your punishing scammers video. Keep up the great content :)
I don't fully agree. Can imagine when you're doing SPA stuff then this makes a lot of stuff easier but what happens then if you need to share these styles with other part of your system outside React? Let's say admin page runs on react but main page can be SSR generated. If your only reason is because of maintainability, then that's what tests are for.
CSS scoping can be handled with CSS modules, not just styled-components. Scoping styles to a human-readable wrapper class, as shown in your SASS example, is fragile because you may still cause a name collision and every component is now required to have a wrapper class to scope it's inner styles.
I'm not fully convinced of styled-components because:
a) it mixes CSS and JS which is not modular and it's React-only syntax. tech changes all the time and it'll be harder to separate the two
b) it mixes CSS and JS AND HTML: you specify the HTML tag as part of the styled-component which adds another abstraction layer and makes it harder to read e.g. imagine you're reading JSX and you see , ok so it's a header tag, right? Actually it could be a header, h1, h2, h3, p, etc. and the developer is forced to dig an extra layer to find out what is the semantic tag
EDIT: logically incorrect and clickbait video title, don't sink to the level of shitty devs on TH-cam. I usually like your videos, keep it up :)
I 100% agree, never really saw the point of styled components, why would I want to scroll 500 lines of CSS code before arriving at JS/JSX logic lol
No, you just have to define a parent tag of a page, then grab the rest of the tags normally like you would using their ID's and classes.
I find it absolutely amazing how JavaScript developers always find an way to justify a bad idea.
Absolutely not. This was the case 3-4 years ago. Then we as a community learned styled-components is a major source of performance issues with re-renders and js execution time. If your code is SEO vital, styled components is going to harm you for Core Web Vitals. You are much better off with CSS Modules and/or Tailwind.
^ yup, on react native projects maybe yes, but web it's just not as worth it
Do you have a link to explain the downsides please ?
I'm a newbie , so can you explain further? Aren't styled components rendered only when needed? How does that harm the web vitals? For a big project should we use CSS or Styled components?
@@kart1372 It renders each time new component is found in the code and pauses current process to do it.
So it requires longer load time and the site becomes extremely heavy the more you depend on it.
Though I think there was a way to delay or preprocess the rendering final product...
Like html has preloading for images or other files as if they are part of background process.
React server -> pages -> page change, process at pc or ask server for component changes -> repeat until all loaded.
Basically on older pc you see white screen flash and components move in order as the page continues to load.
It still takes longer than a static page rendering with browsers. Normal html, css and no js executions to change content.
I'd rather ask the information for preview from server. Rather than ask how it is previewed and then ask for the information.
I did some react, I prefer static pages, but it was fun doing a point calculator for card game with component attributes.
I cant say it is a waste to learn react as you can think a way to do it with other type of js script later, like by simply search and access elements, which to fill with the new information, using just normal js.
It's an interesting approach, and for small projects I can see this as adding value if you don't want to manage less/sass.
I'll add to some of the concerns -
* If you're working on a larger application on a team, building components that might need to be styled differently based on which page and what context they're in, the users of those components could find themselves fighting styles added via styled-components (without an easy remedy)
* At enterprise size, switching one theme for another could be more challenging, since it would/could mean touching css in a whole lot of places.
* If you have a "mixed render" scenario (say you're white-labeling a 3rd party site that's embedded or a step-through with redirect back to your site) exporting styles in a consistent way is more difficult
* in all of the above scenarios you might want to style elements/components that are several layers down the html tree. If this supports a less/sass style syntax it could be ok, but if not you'll be managing styles in two places - that'd be bad.
So, at first blush, probably well suited to smaller pure-react applications with few/no integrations and very small teams that don't work with others.
In more complex scenarios... need to play with it to see if there are mitigations to the above.
Since giving tailwind a try, I don't think i'll ever look back. 😊
With inline fold
Ported over every component in a large project to tailwind from styled components, and it’s so much nicer.
Facts!
Same, global css utility classes are the way to go. Just need locally scoped css sometimes, a-la vue or svelte all-in-one file with style tag
I really want to use tailwind but we only allowed to use boostrap at work, so boring 😩
Eh - it's neat but I think I'd prefer creating class selectors in the stylesheet... I imagine what you've shown would be useful for small projects, but what if a big team is working on this? They'd have to find all the little places where you've created the consts if they want to change the styling.
Thank you for showing us as always, and great video!
Bear in mind this is a React only solution anyway. In a normal React project, components are their own files (usually). So changing component style just means opening the file and changing it. The strength of this is bigger as the team size grows.
I think the key here is separation of component libraries and themes from frontend application code. You want that single global profile layout style, and you don't want to go find and change all 1000 individually styled buttons with a duplicated font size attirbute, but at the same time, every consumer of your library will have its own unique complexity, so you probably can't account for everything in your component library, and ad-hoc styling is a must. As long as those two things are separate, you dodge the maintenance overhead of defining styles on a component-by-component basis and get the best of both worlds.
I would love to see a more in depth tutorial about styled components from you. But in the several videos I've watched trying to learn it, I learn more from you than all those other videos and in only 7 minutes
TailwindCSS wants to have a word with you
The company I just started at uses these for our product and I'm glad you made a video on this! I was wondering where the funky class names were coming from, I figured it might've been something with our bundler.
I wanted to find the “props” thing like 2 hours. Thank you
Very apt and informative video. Thanks.
Vue 3 has just about the same logic but more more eloquent, and minus the spaghetti code React ends up beying.
While I'm not a fan of React, styled components are beautiful and I will do everything in my power to keep using them.
Really nice concise explanation.
Seems handy but what is React and React Native?
5:18.
Glad to know I am not the only one who says "and and" lol.
Amazing video!< This helped a lot!
vue sfc addresses some of the issues with the scoped style tag.
Appreciate the video. But why not using sass as module? It is solving all sass/css downsides mentioned in this video and also giving same or more flexibility with less boilerplate and also with a very less learning curve. In addition to that, Styled Components also creating a conflict with the props usage as you would be using the props both passing the react props and also styles components props.
For those who liked the idea of css-in-js and think it's not possible for a framework like Angular. You could use emotionjs which is a css-in-js library that is framework agnostic. 🔥
Definitely recommend tailwind over styled components, but definitely styled components over raw css or scss.
Tailwind > CSS modules >>>>> styled components IMHO.
using Tailwind with classnames (an npm package because Tailwind doesn't conditionally renders classes) is a perfect choice.
IMHO...styled components are more segregated in the code and have more "readability" for those who are old time CSS people. 1/styled components, 2/tailwind. Thanks
Tailwind is a pleasure to write, but not to read. It also lacks the features that makes Styled Components great like the ability to make extensible design systems. Tailwind is good for prototyping and small projects that don't change much, but horrible for use on a real team.
@@highlanderdante true
One question, the problem with specificity is not solved with css modules?
I'm using emotion usually (it's basically almost the same as styled components), but i always wondered if the approach with css modules would solve the same problems and it's css by default so it's easier to disattach from the js file (if the component is too large sometimes it's better to separate styles in another file i think).
You could create another file for the styles in js but it's strange for me.
Great video by the way!
100% of the times specificity issues arise from overuse of frameworks and bad factoring of components.
In the end it's the same shit and just a different way to do it. This makes sense when working with a JS framework but it's lame to claim that this is "the only way to do CSS" where for most projects this is just cruft.
Engineer man was living under a rock and just discovered styled components😆 jk
Lmao. I started using React and then MUI. My old way of styling seemed less and less appropriate.
@@EngineerMan React, MUI and styled components are probs one of the best matches out there. Super powerful, reliable, robust throughout the whole codebase regardless how large, and a delight for the developer writing/reading the code. Have not encountered a single thing I couldn't do with these things, throw formik and yup in the mix as well for clean and robust form handling.
Tyrone agrees with Engineer Man.
Styled components is a great solution, way better than Tailwind... I can't see why people are so into that trend. Tailwind is for people that don't really care about CSS much.
Anyway.. I would prefer to have a separate file for my styles but it's doable with styled components and I like that you can easilly pass props and use them directly in your rules.
Although, you can do the exact same thing with CSS Modules and you can pass the "props" as classes or CSS variables.
Plus you can use SCSS in your modules... so many nice color functions mixins etc. (I know there is polished for styled components).
I also happen to prefer the class naming in CSS modules, way more friendly in the eye.
CSS modules and Styled Components they have some similarities and recently vanilla extract css kinda merged those worlds and by the of Greysk... eehh sorry I mean Typescript we get to have a typed version of CSS Modules.. pretty neat.
To be honest though in most of my projects, CSS Modules seems the right way for me.
Hey Engineer man just use Tailwind with *classnames* npm package. It is much more powerful and useful than styled components.
i prefer tailwindcss, so efficient
I like it too. Just takes a little bit of time to setup and learn the apis.
@@vivekkaushik9508 intellisense vscode extension ftw
I'm not 100% convinced but I might try using it for a few small components and see how I get on - cool video nonetheless
Personally I would not use React, because its way to complicated.. Svelte is the way to go, including Tailwind CSS and you have the perfect setup nowadays
I thought tailwind was deprecated and out of date
@@nunu_blot1063 It is the complete opposite. The support for Tailwind is massive and the JIT integrations makes the setup extremely simple
Unfortunately this new trend of css in js can destroy the performance of your application especially in android mobile devices.
We experienced this first hand on our website. Styled components causes high LCP, ergo taking huge hits on SEO.
The idea was doomed from the start, JS performance on mobile devices is very poor especially on Android devices. You're better off by using vanilla css modules. Don'tforget that Google crawlers use the mobile view to benchmark your website! Not surprising since 70% of web traffic are from mobile devices, and this number will continue to grow.
@@jackflowt 50% of the web traffic comes from mobile devices not 70%.
How do you click on links that are obviously malicious, but without getting hacked? Like in your punishing scammers video. Keep up the great content :)
tailwindCSS > styled components all day
Can you help me please
Just use Svelte or Astro and you don't have to deal with crap like this.
No it's tailwind. JK good video
Good thing I don’t have brain damage (write JavaScript) then.
I don't fully agree. Can imagine when you're doing SPA stuff then this makes a lot of stuff easier but what happens then if you need to share these styles with other part of your system outside React? Let's say admin page runs on react but main page can be SSR generated. If your only reason is because of maintainability, then that's what tests are for.
SC does has a way to create GlobalStyles too. So your variables and global CSS styling can go in there.
Svelte also support this, very useful
Great
I've always preferred writing my own CSS over using styled components-like libraries. Now with Tailwind it's not even a competition.
I do not recommend "Styled Components" today there are many alternatives which offer much better developer experience and performance.
List em
@@brahmabull4004 css modules
Styled components are the worst idea developers have ever come up with. Time for this stupid fad to end
what's with all these clickbait titles nowadays.
Tailwind is best than this approach
Css modules are way better. styled components are literal trash.