Why you should look into these React component styling options!
HTML-код
- Опубликовано: 24 авг 2024
- Styling React components is easy and difficult at the same time. There are so many options! Inline styles, styled components, vanilla CSS, CSS modules and more. Let's take a closer look at the best alternatives!
Join the full "React - The Complete Guide" course: acad.link/reactjs
This course might also be interesting: "React Native - The Practical Guide": acad.link/reac...
This video comes with an article you shouldn't miss! You also find all the source code links there: www.academind....
Check out all our other courses: academind.com/...
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
![[DOKKAN BATTLE] Worldwide Campaign Announcement Video](http://i.ytimg.com/vi/zxfEiMksZQs/mqdefault.jpg)
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
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!
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!
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.
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! :)
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??
Very well explained. Liked the way
Maximilian presented the concepts here, as he always does!
Amazing how much material you squeeze into one video. that set right many things for me. Thank you!
Thanks for the clear explanation max.
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.
Excellent Overview on React Component Styling
{2021-09-27} , {2022-02-28}
Thanks! I really wanted to learn Styled Components and using CSS modules without running `npm run eject`.
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!?
Why is this 3 year old video the only video on RUclips that explains styled components properly?
Very helpful! Thanks for sharing this!!
Great video! I think, Typescript version of that would be event more valuable!
Dude!! Big like from a Portuguese junior coder!
Max, you are the man! Thank you so much for all your videos!!
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 .
40% of my react knowledge comes from this channel!
what about the other 60%?
@@muchvibrant Practice
@@MistaT44 Golden answer :)
I was confused by all the options and this video made it all clear to me. Thanks c:
Love this video :-) Easy to understand and no effort at all 😎 Keep the content coming guys.
Are you single Max? Best tutor ever!!!!
I feel like styled components are so cool!
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...
Awesome video, Max. Can you please tell us your personal take on FCP for CSS-in-JS solutions?
Who needs a university education when you have Max?
Useful material. Thanks a lot Max!
I was just looking at which framework to use to style react components!
hope syntax highlights for styled components will be supported in vs code
Since you can explain so well. I would appreciate some advanced topics explained.
This is pure gold, Thank you!
what are the cons to use both - css file and styled components?
is the last one same with using "use npm eject and configure webpack"?
23:45 is when you get module css!
this is what I waiting for .. thanks
Now i knew why search engines recommends me Styled Components Vs CSS Modules when i search for css modules🤣
Hey, great video. What do you think about styled-jsx?
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!
Amazing video. Thanks Max
14:50 I'm surprised the pseudo class selector is written without an ampersand here. Is this correct?
Thanks bro vey much. Untilk this day i dont have been found this kind of information
sir plz react short key for example racc press which keyboard key
Thank You So Much Max.
This is gold❤
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?
great videos, good paced. thank you
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.
Maybe you will create a course about optimization in React?
Thanks, pal !!! I was lost in what kind of CSS to use. Seems like component.module.css is the one I would go with...
Excellent!
Max can u make a styled component videos or tutorial
Great video. Thanks!
thank you! really helpful!
omg, i bought you react couser and youtube recommend you
More angular and Ionic please
How do you use google fonts with styled components?
Excellent Video! Thanks a lot!
Great things, but what about SCSS, or LESS files, is it working the same?
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?
Max so what method is your preferred method?
Could you please upload videos for storybook react ui components ?
Hey what camera and video setup do you use in you studio to get such clean high def videos. Camera? Mics? lights? Ect?? Thanks
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.
can you help me ..
I am confused which is more better when building angular app bootstrap or angular material ..I hope to help me
vielen danke, god bless you.
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 🙂
Excellent
Awesome videos
Thank man. I love it.
what's the best way to write css these days?
can't thank you enough..very helpful
Glad it helped
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.
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
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.
thanks! subscribed
Thank you so much
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.
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.
I like of conventional css files
Really great video!
Glad you liked it!
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...
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
Thanks for good video!!
Styled components do not seem to work on internet explorer though.
Ever notice how round-about all these "solutions" are? Why not have something like Vue.js single-file components?
good job
now styled-components allow to write:
styled.div({color:'red'});
styled.div(props=>({color:props.color});
Helpful video..
:)
so styled components is another word for css in js??
so perfect
good stuff.
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.
Waiting for your vuejs related videos:(
Might come in the future, we'll see.
very powerfull
I remember a long, long time ago they called "tag template literals" "string templates". I am falling behind the times.
What IDE/Editor is this?
It's Visual Studio Code.