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 :)
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!
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
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!
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.
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! :)
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.
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)
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.
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.
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 .
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.
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...
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!?
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.
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?
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
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.
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
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.
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?
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
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.
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 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?
writing css in style component has no hint as in normal css file. I was wondering why reactjs has so many third library and definition. also the style component look stupid and weird syntax The extending style works as oop design pattern, but react now is more functional pattern.
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...
This guy is personally responsible for like 60% of my coding knowledge
For real. His React course on Udemy *chefs kiss*
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 :)
Thanks so much for your awesome feedback and support!
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!
That's so great to read Ville, thank you very much!
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
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!
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.
Wow, thank you very very much for these wonderful words Zakary!
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! :)
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.
Very well explained. Liked the way
Maximilian presented the concepts here, as he always does!
Very well explained. Highly recommended for anyone who has recently started learning React.
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??
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)
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.
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.
Amazing how much material you squeeze into one video. that set right many things for me. Thank you!
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 .
Love this video :-) Easy to understand and no effort at all 😎 Keep the content coming guys.
14:50 I'm surprised the pseudo class selector is written without an ampersand here. Is this correct?
Thanks for the clear explanation max.
Very helpful! Thanks for sharing this!!
Dude!! Big like from a Portuguese junior coder!
Max, you are the man! Thank you so much for all your videos!!
I was confused by all the options and this video made it all clear to me. Thanks c:
Thanks! I really wanted to learn Styled Components and using CSS modules without running `npm run eject`.
40% of my react knowledge comes from this channel!
what about the other 60%?
@@muchvibrant Practice
@@MistaT44 Golden answer :)
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.
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...
Excellent Overview on React Component Styling
{2021-09-27} , {2022-02-28}
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!?
Are you single Max? Best tutor ever!!!!
This is pure gold, Thank you!
Great video! I think, Typescript version of that would be event more valuable!
is the last one same with using "use npm eject and configure webpack"?
what are the cons to use both - css file and styled components?
Useful material. Thanks a lot Max!
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?
Thanks bro vey much. Untilk this day i dont have been found this kind of information
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.
Thank you very much for your fantastic feedback Kaze!
Hey, great video. What do you think about styled-jsx?
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?
Amazing video. Thanks Max
Awesome video, Max. Can you please tell us your personal take on FCP for CSS-in-JS solutions?
Your thoughts on reactstrap?
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
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.
For using CSS modules in CRA, dont you need to eject the project and tweak lines in webpack settings?
You can do that, too - in newer versions of CRA, you can use the built-in functionality as well though.
Hey what camera and video setup do you use in you studio to get such clean high def videos. Camera? Mics? lights? Ect?? Thanks
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
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.
can you help me ..
I am confused which is more better when building angular app bootstrap or angular material ..I hope to help me
I feel like styled components are so cool!
Thanks, pal !!! I was lost in what kind of CSS to use. Seems like component.module.css is the one I would go with...
Max so what method is your preferred method?
sir plz react short key for example racc press which keyboard key
How do you use google fonts with styled components?
Great things, but what about SCSS, or LESS files, is it working the same?
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?
bootstrap for responsive.
you can create global styles.
great videos, good paced. thank you
Thank You So Much Max.
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.
hope syntax highlights for styled components will be supported in vs code
How to remove unused css using the css modules and webpack or maybe some other way?
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
23:45 is when you get module css!
this is what I waiting for .. thanks
Excellent Video! Thanks a lot!
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.
Since you can explain so well. I would appreciate some advanced topics explained.
This is gold❤
can't thank you enough..very helpful
Glad it helped
thank you! really helpful!
I was just looking at which framework to use to style react components!
Styled components do not seem to work on internet explorer though.
Been using styled components for almost a year now. It's purely amazing.
Please don't forget to mention theme providers..
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?
@@vaibhavm1986 it gets injected into the dom, each styled component receives a randomly generated class name, that refers to some css styles
@@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?
@@vaibhavm1986 I am using nextjs, it comes with webpack by default
@@aleksd286 oh ok cool 🙂
Really great video!
Glad you liked it!
Why is this 3 year old video the only video on TH-cam that explains styled components properly?
Very helpful, thank you ;)
what's the best way to write css these days?
thanks! subscribed
Could you please upload videos for storybook react ui components ?
Excellent!
Who needs a university education when you have Max?
Thank man. I love it.
Maybe you will create a course about optimization in React?
What IDE/Editor is this?
It's Visual Studio Code.
omg, i bought you react couser and youtube recommend you
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
Max can u make a styled component videos or tutorial
Awesome videos
vielen danke, god bless you.
Thank you so much
Thanks for good video!!
Now i knew why search engines recommends me Styled Components Vs CSS Modules when i search for css modules🤣
Helpful video..
:)
Excellent
so styled components is another word for css in js??
Ever notice how round-about all these "solutions" are? Why not have something like Vue.js single-file components?
writing css in style component has no hint as in normal css file. I was wondering why reactjs has so many third library and definition. also the style component look stupid and weird syntax
The extending style works as oop design pattern, but react now is more functional pattern.
More angular and Ionic please
good stuff.
good job
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...
Are you planning on doing a Mobx video or tutorial?
Not at the moment.
@@academind You should
Hi max, what is your take on Meteor.js? Can we expect any tutorial of on Meteor/Angular anytime soon?
so perfect
I like of conventional css files
Waiting for your vuejs related videos:(
Might come in the future, we'll see.
now styled-components allow to write:
styled.div({color:'red'});
styled.div(props=>({color:props.color});