If you want your styles to be isolated to your component and not pollute the global CSS namespace. A simple way to do that is with CSS modules. In fact, next year, support CSS modules out of the box. To demonstrate CSS modules, we have a simple button component that we are using on a simple page and we've intentionally kept this button component to be extremely simple. It is basically just a thin wrapper over the browser native button element, and this is what the rendered result of the button currently looks like. Now, in order to style this button using CS s modules, we create a new Cs s file called Button Do module to CSS.

If we use button css, it would be a global CSS file, which is something that we looked at in our previous lesson, and when it is module css, it becomes a CSS module, which isolates the CS s such that it doesn't pollute the global namespace. The objective of a CS module is to export CSS classes. For example, here we are exporting the CSS class name called button and we don't have to worry about a button class name existing elsewhere because as you will see, it'll get rewritten into something that is specific to this file. And then you can use any CS properties that you want.

For example, I'm setting the cursor to be pointer, setting a font size bedding, border radius color, background color border, and a CSS transition. An advantage of using CSS instead of style attributes is that we have access to the full CSS. For example, we can use pseudo classes like Hover, and this is a concept that we covered in our React course as well. Now, any classes that we define within our module CSS can actually be accessed within our code by using a JavaScript import statement. We bring in the default export from the button module, do CSS and its members will be the CSS class names

that we defined within the module file. In our example, we can use Styles Do button to access the generated CSS class name in order to style the button. All that we need to do is to wire the class name prop to the generated styles button member. And now if you look at the browser, you can see that the button is being styled based on the properties that we specified within button dot module, do css. Now, it is worth looking at the generated CSS class name just so you have an idea of what's happening under the scenes. You can see that the class name is not just button,

it is actually the file name button followed by the class name button, followed by a hash that is generated based on the contents of the CSS properties. This is how CSS modules ensure that we don't end up accidentally polluting the global namespace. Here's a quick recap cheat sheet for you. You define your Cs s class names within a modular css. You import the module CSS file using a default import, and then you can access the class names using properties of this default. Import. CSS modules are great, but they are still mostly limited to CSS syntax.

If you want to uplift your CSS files to allow advanced syntax, that can help reduce the amount of CSS you need to write And maintain. An easy way to achieve that is by using SaaS. Now, next J does support SaaS, but it is not enabled by default. All that you really need for this actually is to install the NPM package SaaS and it is only needed during development because SaaS can be pre-compiled into CSS, which next J will do during a production build. Now SaaS actually supports syntax called SCSS, which is a super set of CSS.

So if we just rename our CSS file to S-C-C-S-S, it'll still work perfectly fine. We renamed the import statement and then we also rename the CSS file. Now, there are a lot of features enabled by SaaS, but let's talk about a simple one even to clean up this particular example. Notice that we have a duplication of the CHS class name called Button, so if you ever decide to call it something else, we would have two places that we would need to refactor. We can simplify these tiles in SaaS by using nesting and the parent and percent selector. So we nest the Hover state into the button class

and instead of having to say dot button again, we can use amp percent and it'll automatically point to the parent CSS class. In terms of behavior, it is going to remain the same as the CSS we wrote previously. We have a base styles and then we customize them when we hover over the button.