The Best Way To Style Components In React | CSS Modules

In this video, I'm going to show you how to use CSS modules in React. CSS modules is a new feature in React which allows you to manage your CSS in modular fashion. This is a huge advantage over using conventional CSS files, because it makes your code more organized and manageable.
If you're interested in learning more about CSS modules or React, then this is the video for you! I'll show you how to use CSS modules in React, and how it can help you write more organized and manageable code.

[@jaybarls]

This is a great explanation, cheers! I'd been considering all the options including CSS-in-JS, but I like the simplicity and local scoping that modules offer - feel like modules are my preferred approach (for now).

[@TheOlolo123]

By the way, it's not necessary to use string interpolation, className={classes.example} is enough

[@kristofs8893]

I have a tip for you. If you use bracket notation you can still use dashes instead of camelCasing your CSS classes. Much more Vanilla CSS like in my opinion of course. :)

[@laraleon8033]

Isn't this the same as having another class in the .css for the other button?

[@morteza7298]

yes it is, but having all your classes in one css file doesn't scope very well, your bundle size increases and in larger projects it may causes problems like having duplicate or classes with the same name and having to use !important and so on, but by using modules, you can have a class named for example "paper" in all your modules

[@hello-ff8hh]

love the background music

[@RajeshTechForge]

Thanks a lot for this video, as a React beginner it's a headache for me 😇

[@TheOlolo123]

Have you tried use css modules with scss?

[@yjefecustom]

What's the difference between this and just using CSS id?

[@ashhalidrees7525]

if u simply use the css id, u have to name the className of that specific react component same as that as u use in the css file, either way depends on u, but this one is convenient as
u simple need the refernce to that module and write the class name defined in the css module

[@pyroghost11]

you don't need string interpoolation for one class

[@szeredaiakos]

Before frontend frameworks I was a slicer. I witnessed the rise and death of IE6.... Never really had an issue with classnames clashing. But you do explain the audience where to click so .. yes. Styled components are cool. Rather have that thn some junior screwing up an entire app :).

[@JBereza]

How many people worked on that project? Also was all code in that page yours or did you used some 3rd party stuff too?

[@szeredaiakos]

@JBereza mostly me, occasionally 3 of us. We used prefixing, which was intuitive enough to pick it up in a glance.
And yes, we also used copy-paste stuff occasionally.
Later, on larger projects, we did what now scss nesting compiles down to.

[@Dadaadad268]

CSS Modules is new ?

[@gerardotopete9711]

Styling components with JSX syntax is really annoying. That's the only thing I dont like about React so far... the styling.

[@mikewilliams6732]

Music is too annoying...