Styled Components Is the Only Way To Do CSS

Рет қаралды 20,830

Жыл бұрын

Styled Components is the way forward for component styling. After using LESS, SASS, and SCSS, I can say this is the best tool for React and React Native projects.
Hope you enjoyed the video!
Check out this code here:
github.com/engineer-man/youtu...
Join my Discord server and come say hi:
/ discord
Check out some code on my GitHub:
github.com/realtux
github.com/engineer-man/youtube
Send me a Gab:
gab.com/engineerman
Other Social:
/ engineerman
/ _engineerman
/ engineermanyt
www.flaticon.com/free-icons/tick - Tick icons created by Octopocto - Flaticon

Пікірлер: 78

@ricardo.mazeto Жыл бұрын

I find it absolutely amazing how JavaScript developers always find an way to justify a bad idea.

@tobias-edwards Жыл бұрын

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 KZfaq. I usually like your videos, keep it up :)

@karl4813 Жыл бұрын

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

@CodeWithKenny Жыл бұрын

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.

@lynn_phoenix Жыл бұрын

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.

@_justnick Жыл бұрын

^ yup, on react native projects maybe yes, but web it's just not as worth it

@pierrelucas3784 Жыл бұрын

Do you have a link to explain the downsides please ?

@kart1372 Жыл бұрын

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?

@JMIK1991 Жыл бұрын

@@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.

@DSCuber Жыл бұрын

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.

@tomcrooks1627 Жыл бұрын

Since giving tailwind a try, I don't think i'll ever look back. 😊

@fuzzylogic33 Жыл бұрын

With inline fold

@radomane Жыл бұрын

Ported over every component in a large project to tailwind from styled components, and it’s so much nicer.

@0xTomster Жыл бұрын

Facts!

@alexnezhynsky9707 Жыл бұрын

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

@irun_mon Жыл бұрын

I really want to use tailwind but we only allowed to use boostrap at work, so boring 😩

@twicegravity Жыл бұрын

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

@ZacKoch Жыл бұрын

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!

@EngineerMan Жыл бұрын

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.

@KnThSelf2ThSelfBTrue Жыл бұрын

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.

@vivekkaushik9508 Жыл бұрын

Very apt and informative video. Thanks.

@johnc0de Жыл бұрын

Amazing video!< This helped a lot!

@bbrendon Жыл бұрын

Seems handy but what is React and React Native?

@conspirisi Жыл бұрын

Really nice concise explanation.

@khaledsaidi7709 Жыл бұрын

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. 🔥

@hakobtorosyan7413 Жыл бұрын

I wanted to find the “props” thing like 2 hours. Thank you

@KyleBeard Жыл бұрын

Definitely recommend tailwind over styled components, but definitely styled components over raw css or scss.

@highlanderdante Жыл бұрын

Tailwind > CSS modules >>>>> styled components IMHO.

@gamer-tantrik Жыл бұрын

using Tailwind with classnames (an npm package because Tailwind doesn't conditionally renders classes) is a perfect choice.

@MarkAnthony819 Жыл бұрын

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

@Nellak2011 Жыл бұрын

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.

@gamer-tantrik Жыл бұрын

@@highlanderdante true

@CrzyMan_Personal Жыл бұрын

While I'm not a fan of React, styled components are beautiful and I will do everything in my power to keep using them.

@acidhauss7018 Жыл бұрын

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

@olatunjiolakunle6908 Жыл бұрын

vue sfc addresses some of the issues with the scoped style tag.

@mingirc Жыл бұрын

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.

@rAskRedditHighlights Жыл бұрын

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 :)

@betterfly7398 Жыл бұрын

5:18. Glad to know I am not the only one who says "and and" lol.

@Svidur Жыл бұрын

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!

@theonlyD Жыл бұрын

100% of the times specificity issues arise from overuse of frameworks and bad factoring of components.

@chefmaniafgc Жыл бұрын

TailwindCSS wants to have a word with you

@gamer-tantrik Жыл бұрын

Hey Engineer man just use Tailwind with *classnames* npm package. It is much more powerful and useful than styled components.

@theretroman3862 Жыл бұрын

Vue 3 has just about the same logic but more more eloquent, and minus the spaghetti code React ends up beying.

@postingbmwm3 Жыл бұрын

Tyrone agrees with Engineer Man.

@xphstos_ Жыл бұрын

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.

@luissolanodev Жыл бұрын

Engineer man was living under a rock and just discovered styled components😆 jk

@EngineerMan Жыл бұрын

Lmao. I started using React and then MUI. My old way of styling seemed less and less appropriate.

@PrevalentAA Жыл бұрын

@@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.

@theonlyD Жыл бұрын

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.

@yakob-g Жыл бұрын

i prefer tailwindcss, so efficient

@vivekkaushik9508 Жыл бұрын

I like it too. Just takes a little bit of time to setup and learn the apis.

@codeaccuna Жыл бұрын

@@vivekkaushik9508 intellisense vscode extension ftw

@jackflowt Жыл бұрын

Unfortunately this new trend of css in js can destroy the performance of your application especially in android mobile devices.

@jackflowt Жыл бұрын

We experienced this first hand on our website. Styled components causes high LCP, ergo taking huge hits on SEO.

@jackflowt Жыл бұрын

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.

@emreozgun3846 Жыл бұрын

@@jackflowt 50% of the web traffic comes from mobile devices not 70%.

@McDevil1988 Жыл бұрын

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

@nunu_blot1063 Жыл бұрын

I thought tailwind was deprecated and out of date

@chefmaniafgc Жыл бұрын

@@nunu_blot1063 It is the complete opposite. The support for Tailwind is massive and the JIT integrations makes the setup extremely simple

@MrPoselsky Жыл бұрын

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.

@v1d300 Жыл бұрын

SC does has a way to create GlobalStyles too. So your variables and global CSS styling can go in there.