Original subtitles

Now, wherever you like

styled components or not as an absolutely personal thing

there is no wrong or right here.

Now, when it comes to me personally

I prefer CSS in the CSS files.

I like the separation of CSS and JavaScript.

I like having clean JavaScript files.

And I simply like default CSS.

Now, of course you can absolutely stick

to the CSS approach we used at the beginning

where you had global non scoped styles

and you as a developer had to make sure

you're not accidentally reusing names, class names.

You're not accidentally affecting the styles

of (mumbles) components.

That is definitely one route you can take.

You can also however take CSS to the next level

with a feature called CSS Modules.

CSS Modules is a feature which is only available

in projects that are configured to support it

because it needs a code transformation that needs to be done

before your code runs in the browser.

Now, the good thing is the react projects created

with create react app which we used

are already configured to support CSS Modules.

This is actually an excerpt

from the official create react app docs

where you'll learn how you can utilize CSS Modules.

And it's super, super simple to utilize CSS Modules.

So let me show you how it works

and let's start with the good old button again.

Now of course you can stick to the style component there

but I will comment this out and comment out this import

and instead add the import all for react from react again

because I will comment in my own component again,

this one which uses JSX

and which (mumbles) for needs to react import.

Now we have the button CSS fall in India.

We got the different styles and we can leave that as it is.

There's one thing we now need to change though.

Of course, we need to add the import to the CSS file again,

but instead of importing it like this

you now import it slightly different.

You import classes or styles totally up to you

from the CSS file.

That's a syntax we haven't used before,

but that is actually how you have to import from a CSS file

if you wanna use CSS Modules.

Actually for (mumbles) code transformation,

which is needed behind the scenes to happen,

you also need to rename your file a little bit,

your CSS file.

You need to add dot module in there

so that it's named Button.module.CSS.

And then of course here,

you import from Button.module.CSS.

This is basically a signal

to the underlying compilation process

to transform to code so that CSS Modules work.

And I'll show you how they work

behind the scenes in a second.

So now we have this import and now we need to do something

with this import, that styles thing here.

We use it down there where we apply our class name.

Instead of applying a string class named like this

you apply something dynamic.

You refer to that styles thing

which you're importing from the CSS file.

And that thing turns out to be an object.

And in that object, you'll have every class you defined

in your file as a property.

So if I added a button class here in the CSS file

I now have the button property here.

And that's all we need to do.

This will apply this button class in a special way

to this button element here.

Let's see it an actual let's save this

and go back to our application.

And we see the button looks the way it looked before.

Now we see something interesting

if we inspect this here in the Def tools.

On the button you'll see a very strange class.

This is not the same class as added by style components.

Those classes looked like this here on the div.

Instead this looks a bit like the class we defined, button,

but with more information added to it.

It's basically component name, underscore, our class name

and the CSS file, double underscore some unique hash.

What CSS Modules does

or what this concept of CSS Modules does.

What the build process does under the hood

is it takes those CSS classes and a CSS file

and basically changes those class names

to be unique.

That's the core thing it does.

For every component it changes the class names

off the classes you're importing here.

So off the CSS file you were importing to be unique.

So if you import from the CSS file here

in the button component,

it will create unique classes, unique worshens

of all those styles and classes here for this component.

And for data it generates brand new class names

that look like this.

Inside of these class names, your styles will be

so it will just keep your styles.

It will not touch those

but wrapped into this new class name.

You can see this if you expand the head section here

in the rendered Dom.

There you will see a bunch of style texts.

And if we now search for the one here,

here at this for the button

we see that's this newly generated class name.

Here we have our button styles

and that newly generated class name is also used

on the focus style on the hover and on the active style.

And with that, does CSS Modules concept ensures

that the CSS styles we set up in a CSS file

are a scoped Q and a component

we import this file into.

For (mumbles) we need to work with CSS classes here

because we then access those classes

as properties on the imported styles object.

This is how we basically make the connection

between these dynamically generated class names,

which we as a developer don't know in advance

and our components here.

And that's also what you see here in the official docs.

That's in the end, all that's to it.

This is how you can use CSS Modules.

And for me that's actually the best of both worlds.

We have our styles set up in CSS files

but there's still scoped to components where we use them.

So in the next module,

let's all support the course input back to use the CSS file.

And then I will also show you how to use media queries

with CSS Modules.