Why you should look into these React component styling options!

[@TheAkiller101]

This guy is personally responsible for like 60% of my coding knowledge

[@generalwill10]

For real. His React course on Udemy *chefs kiss*

[@gvsakhil143]

You are my lifesaver Max. I learned Angular from your course before a year and now I am in very good job. I also learned Nodejs and I am now also a FullStack and MeanStack Developer. Thanks a lot again. Keep going on we support u :)

[@academind]

Thanks so much for your awesome feedback and support!

[@amalitsky]

Man, I love you for introducing separate CSS file and BEM naming concept! Thank you so much! Didn't see that coming in react corner of frontend world. IMO simply the best approach of all. CSS modules is like a cherry on top of the cake

[@matthewwhite3744]

This is exactly what I was looking for to solve an issue where I had multiple different buttons in an app that I wanted to have their own styles, but not use inline styling. Thanks a million!

[@villerintala7777]

No matter what programming tutorial I am looking for, nowadays I come directly to check Max's video if it exists about that topic. Always the most straight-forward and understandable approach. Time well spent. Thanks, keep these coming!

[@academind]

That's so great to read Ville, thank you very much!

[@zakarygriffin3280]

Your videos are a breath of fresh air in the developer world. It's not often that I find creators that explain things so clearly and elegantly. Thank you, this is just what I needed.

[@academind]

Wow, thank you very very much for these wonderful words Zakary!

[@Apparentt]

I would personally highly recommend react-jss for styling components, I think what’s missed which is the real strength of the mentioned package (as well as styled-components, amongst others) is being able to pass a theme around to components and also being able to access component props within the styling; the latter can become very cumbersome using vanilla css or css modules (having to toggle class names based on props or state)

[@NeerajLagwankar]

This. I was introduced to JSS via Material UI and I honestly cannot go back to only CSS or other CSS in JS solutions. The amount of flexibility you get is mind boggling.

[@Thewowhahahawow]

Great tutorial, I love how you explain how certain code operates behind the scene (example: 8:35 ) . It really gives us deeper understanding into the code you're writing unlike most tutorials on youtube which are often just copy and write. I think this is what differentiates from a average developer to a great developer and I'm very glad you are spreading this deeper knownlowdge across to your students online. This is a KEY difference that stands out in your tutorials. Keep it up! :)

[@waldiniman]

Thank you my dude. You're exceptionally lucid in your descriptive modeling of concepts, and have a real talent for communicating the various aspects concisely, yet thoroughly. Very helpful.

[@prasangsharma7]

Very well explained. Highly recommended for anyone who has recently started learning React.

[@crystalclear178]

Now I'm more confused... please tell me how we should use css in proper way...there are too many ways which should we use??

[@luis_soul1]

You’re the best man. I wasn’t sure what are the best practices to css my react project and I was struggling a lot. It’s a small application with 3 pages. Now I can decide which one fits better for my project. Personally, even though it’s a small project, I really believe that CSS Modules are the best method and more comfortable than the other options. Like you said it gives you the best of both worlds. Thank you so much for sharing knowledge, you’re the best.

[@anilmohan9961]

Very well explained. Liked the way Maximilian presented the concepts here, as he always does!

[@fluntimes]

I learned CSS Modules in Gatsby and thought, "wow, these are cool". Not long after that I learned about Styled Components and thought, "this is possibly the greatest package ever added to React. Seriously, if I have to use a global CSS file in React now I feel a bit weird!?

[@orimazrafi9978]

Amazing how much material you squeeze into one video. that set right many things for me. Thank you!

[@arishshah1142]

Thanks! I really wanted to learn Styled Components and using CSS modules without running `npm run eject`.

[@webentwinkler]

Great comparison, Max. I'm also completely on board when it comes to preferences: Using inline-styles outside of the occasional hard override is a cardinal sin in any web project, no matter the framework/library. I found that styled components, while being a bit better, are still not preferable, because it still sacrifices useful CSS features as the cascade and inheritance. The only good use I found for it is when working with React transition groups with custom animations, for that purpose it is actually very well suited. It actually never made sense to me why anyone would want to force CSS into JS completely. HTML, CSS and JS are three separate technologies that, while of course being designed to work together in unison, are separate for a reason and trying to force one or two of them into the other always comes with huge drawbacks while bringing little to no gain. And while IDEs are smart enough now that they no longer stumble across JSX, styling is still an entirely different beast. And, as you said, if a project has dedicated UI and Business Logic developers, forcing the UI guys to deal with JS files is just bad for everybody. The UI dev gets thrown out of their comfort zone, no longer can have proper IDE support and useful helpers like stylelint and just has a harder time overall. And on top of that, at least when using inline styles or styled components that are defined inside the component they belong to, they constantly produce merge conflicts for the JS devs, who also have to deal with larger files which makes then less readable. What I never understood regarding CSS Modules in React is why they thought they'd have to completely obfuscate the class names. That makes it unnecessarily difficult to debug CSS issues, because one cannot simply copy the class name and search for its style definition in the code base. In my opinion, the best approach to this has been achieved by Svelte, where they keep the original class name from the CSS definition, but for scoped styles they simply add the unique class name to the same element and then the style definition output changes from the source ".my-class-name{ ... }" to ".my-class-name.uniqueClass{ ... }". Why did no one think of that before? But then again, that is a question I asked myself all the time while learning about Svelte... ;-) Congratulations on your great Udemy Svelte course by the way, Max, I cannot recommend that enough! Anyway, back to topic: All those reasons listed above are why, for the react project I'm currently working on (which is based on react-boilerplate which normally uses styled components per default but we only kept them in for transitions) we are using separate SCSS files (one in each component/container folder), which are automatically found and grouped together by webpack, together with a bunch of global definitions for inheritance (like base styling, CSS reset rules, etc.) and simply adhere to BEM conventions. Tried and true and still works best, especially for separation of concerns.

[@crystalclear178]

Exactly.. . totally agree...I thought I'm new in react and that's why it feeling weired with these css and react thing...i thought ill get better understanding and will figure out the actual way of including CSS in react....but I think thr is no way...

[@kazenohito7641]

Amazingly well thought out. I'm an Angular guy so jsx is still REALLY weird to me but this makes alot of sense. css in js and js to write html embedded with css is a whole topic, seemingly almost native to react.

[@academind]

Thank you very much for your fantastic feedback Kaze!

[@Pareshbpatel]

Excellent Overview on React Component Styling {2021-09-27} , {2022-02-28}

[@fhelipeturati1483]

Max, you are the man! Thank you so much for all your videos!!

[@badytouray294]

Love this video :-) Easy to understand and no effort at all 😎 Keep the content coming guys.

[@bayasahamed1815]

Thanks for the clear explanation max.

[@theycallmewolf]

Dude!! Big like from a Portuguese junior coder!

[@StrangeIndeed]

I was confused by all the options and this video made it all clear to me. Thanks c:

[@drdDavi]

40% of my react knowledge comes from this channel!

[@muchvibrant]

what about the other 60%?

[@MistaT44]

@@muchvibrant Practice

[@lukaszwalczak3814]

@@MistaT44 Golden answer :)

[@ronmilich123]

Are you single Max? Best tutor ever!!!!

[@anvarichn]

Great video! I think, Typescript version of that would be event more valuable!

[@rk_nyra]

Very helpful! Thanks for sharing this!!

[@Ttlwar]

Grate vid, from my 20 years experience: CSS Module was looking like the best option however what if i want to refer to the defined className i defined in a global css file ( with a sector like .xyz {color:green }, I would not be able to as the className name will be renamed by the webpack loader. StyleCompoents slows down the coding , why should I have to build a wrapper for every object , even a simple DIV , and clutter up my project with all this code, that also using uncommon JS Tag Template Syntax , however i found it good to inject values from jsx into it to create dynamic styles. I found using one global css file for shared css is a better way , having all css in one file ( editors these days will tell you if something is broken, no need to make one new css file per component , cluttering up my code base with simple styles ) and then if i need to change a style based on some user preference or some other state, i can override it with inline styles. I like to keep things simple, easy to read , easy to learn , less code , less files means less code that to brake , less code to test,. This allows me to have more time to build the real stuff .

[@unmeymahaddalkar4842]

I was just looking at which framework to use to style react components!

[@ernestomotta5178]

This is pure gold, Thank you!

[@almakay01]

I feel like styled components are so cool!

[@bohodirrahmonov8021]

Thanks bro vey much. Untilk this day i dont have been found this kind of information

[@Trazynn]

Why is this 3 year old video the only video on KZbin that explains styled components properly?

[@aleksd286]

Been using styled components for almost a year now. It's purely amazing. Please don't forget to mention theme providers..

[@vaibhavm1986]

Hi Alesk, did u get chance to notice whether final css is injected like link rel or it gets injected directly in DOM because if it gets directly gets injected in dom then bundle size would increase?

[@aleksd286]

@@vaibhavm1986 it gets injected into the dom, each styled component receives a randomly generated class name, that refers to some css styles

[@vaibhavm1986]

@@aleksd286 u are using webpack or cra... To reduce bundle size are you using lazy imports? Else all styles injection into Dom would make bundle size bigger?

[@aleksd286]

@@vaibhavm1986 I am using nextjs, it comes with webpack by default

[@vaibhavm1986]

@@aleksd286 oh ok cool 🙂

[@HIghtowerSever]

Useful material. Thanks a lot Max!

[@stannone7272]

Since you can explain so well. I would appreciate some advanced topics explained.

[@diondreedwards30]

Hey, great video. What do you think about styled-jsx?

[@itzsrikanth]

Awesome video, Max. Can you please tell us your personal take on FCP for CSS-in-JS solutions?

[@MERNStack]

hope syntax highlights for styled components will be supported in vs code

[@omriterem6448]

Amazing video. Thanks Max

[@ek4m81]

is the last one same with using "use npm eject and configure webpack"?

[@СергейМеньщиков-р2ш]

Maybe you will create a course about optimization in React?

[@saramshshrestha7641]

Thank You So Much Max.

[@turbulantarchitect5286]

what are the cons to use both - css file and styled components?

[@dallindavis2131]

Who needs a university education when you have Max?

[@ElderESG]

This is gold❤

[@reactstuffreact4500]

great videos, good paced. thank you

[@matheustavares4442]

omg, i bought you react couser and youtube recommend you

[@TheEtsgp1]

Hey what camera and video setup do you use in you studio to get such clean high def videos. Camera? Mics? lights? Ect?? Thanks

[@meghalbisht6768]

23:45 is when you get module css!

[@zetiraid9857]

this is what I waiting for .. thanks

[@helinli7093]

thank you! really helpful!

[@MichaelSalo]

14:50 I'm surprised the pseudo class selector is written without an ampersand here. Is this correct?

[@AnthonyPaulT]

Max so what method is your preferred method?

[@aburaihan-py4vi]

Excellent!

[@TitiloTeam]

Excellent Video! Thanks a lot!

[@KidJV]

thanks! subscribed

[@vaibhavm1986]

Hey Max I have to do set up for new project kind of confused between webpack and create react app... Could you please guide...so that it becomes easier to decide

[@mbround18]

Create react app uses webpack. My suggestion is use create React app of your unsure what you are doing and or try suing alternatives like parcel or fuse-box.

[@ebrahimjamal449]

sir plz react short key for example racc press which keyboard key

[@mjmagic12]

How do you use google fonts with styled components?

[@juancamiloq1]

Awesome videos

[@kenwanjohi5128]

can't thank you enough..very helpful

[@academind]

Glad it helped

[@Timur21]

I like css modules the best I think. Radium is also not too bad, but sometimes when inspecting the tree of react components, it's annoying to just see Radium Components everywhere...

[@ibrahimkhurshid4339]

Thanks, pal !!! I was lost in what kind of CSS to use. Seems like component.module.css is the one I would go with...

[@ramasamynp8175]

Could you please upload videos for storybook react ui components ?

[@suki5593]

More angular and Ionic please

[@Montclairsoccer1]

Really great video!

[@academind]

Glad you liked it!

[@pratibhalovesu]

Max can u make a styled component videos or tutorial

[@nwobodogeorge5370]

Thank man. I love it.

[@RonaldJayBuayan]

import css is only dynamically inject on dev however on distribution build its compiled in one css.. i was hoping it was going to be injected in build too so it be separated from the main and would be beneficial to the initial load time.. is there a way to achieve this?

[@911madza]

Your thoughts on reactstrap?

[@chispablo]

bootstrap as itself is losing a lot of popularity, a lot of people are going back to pure CSS, just as it happened with jQuery and people went back to vanilla JS. So reactstrap IMO is not that good if you want your site to have a distinguished style, but it's pretty good if CSS is not your forte

[@aleksd286]

pointless. does not achieve much nowadays. for a grid you have CSS grid, for all other things you do them separately or use things that are react based already, like MaterialUI for React, for Vuetify or VueJs, these have much more options. Bootstrap is out-dated.

[@CheikhanyTV]

Very helpful, thank you ;)

[@AmanNidhi]

which one do you prefer? There are so many ways to style a react app, which one is better and which one has the future?

[@oleksiisytar9872]

Great things, but what about SCSS, or LESS files, is it working the same?

[@lullalullafy]

Excellent

[@mahmoudnoby6204]

can you help me .. I am confused which is more better when building angular app bootstrap or angular material ..I hope to help me

[@vikramingleshwar5732]

vielen danke, god bless you.

[@mubarkmurtda4735]

Best way is to use sass module's unless you are using material ui so you can use jss.... although styled components is good there bundle size is huge

[@BrownieloveMike]

Hi Max How do i get hold of you with regards to crating an app? I could not find clear company contacts on your website.

[@hettalamazigh6251]

Thank you so much

[@Robin-il8nc]

I'm currently starting a new React Project and im pretty new to it. My preferred way of writing CSS would be modules with scss. But how do you handle and structure global or Responsive Styling?

[@pulga961]

bootstrap for responsive. you can create global styles.

[@hiteshsuthar1097]

Now i knew why search engines recommends me Styled Components Vs CSS Modules when i search for css modules🤣

[@micoberss5579]

For using CSS modules in CRA, dont you need to eject the project and tweak lines in webpack settings?

[@academind]

You can do that, too - in newer versions of CRA, you can use the built-in functionality as well though.

[@Kanexxable]

Can you please do a video about model view controller vs model view view model. And how they apply in Vue angular and react. I have no idea what a view model is and what it looks like at all. In Vue is the root Vue instance the view model. I don’t get it. Yes I’m now starting to learn typescript and don’t know how well I should use it before going to angular.

[@neosarchizo]

Thanks for good video!!

[@HoangHuy-nq1if]

good job

[@moofymoo]

now styled-components allow to write: styled.div({color:'red'}); styled.div(props=>({color:props.color});

[@TechnoDB]

Helpful video.. :)

[@divyanshubhatnagar4601]

How to remove unused css using the css modules and webpack or maybe some other way?

[@kostiantyn187]

The best way to understand that something is not used is by using the styled-components, your IDE automatically shows to you what you've not used. For CSS modules you've to use the POST CSS & webpack config to rid of some unused css, but you'll have such shitty unused code in the codebase, that is why I do not prefer the pure css solutions any more

[@abdelaesus6678]

so perfect

[@fxnoob]

good stuff.

[@david-tracy]

what's the best way to write css these days?

[@Ziberac]

What IDE/Editor is this?

[@academind]

It's Visual Studio Code.

[@sumanth3036]

I like of conventional css files

[@jyotipandey9218]

Styled components do not seem to work on internet explorer though.

[@javadmohammadi3943]

very powerfull

[@joeygarcia7826]

I remember a long, long time ago they called "tag template literals" "string templates". I am falling behind the times.

[@ProgrammingwithPeter]

Waiting for your vuejs related videos:(

[@academind]

Might come in the future, we'll see.

[@kiana5066]

Ever notice how round-about all these "solutions" are? Why not have something like Vue.js single-file components?

[@RoyerAdames]

Crear content thank you

[@JA1810HV]

Are you planning on doing a Mobx video or tutorial?

[@academind]

Not at the moment.

[@brandonmorera242]

@@academind You should