# Why do we use  .module.css

If you ever worked with React, you might have noticed the use of ***Component.module.css*** for styling the ***Component.jsx*** instead of regular *Component.css .* We'll discuss why.

If regular css files are used, the styles will apply to a **global scope**. Globally, all the elements having the specific selector will have the styles applied.

**Example:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702392857714/29b1ceda-1819-4590-9db6-88aa2226a629.png align="left")

Both components A and B have a div component with className *"text" .*

***A.css*** defines a style rule that sets the color of the "text" selector to red. ***B.css*** defines a style rule that sets the color of the "text" selector to blue.

***A.css***

```css
.text{
    color: red;
}
```

***B.css***

```css
.text{
    color: blue;
}
```

***A.jsx***

```javascript
import styles from "./A.css";

function A() {
  return <div className="text">A</div>;
}

export default A;
```

***B.jsx***

```javascript
import styles from "./B.css";

function B() {
  return <div className="text">B</div>;
}

export default B;
```

Result: Both div components are coloured blue.

Reason: Style set by ***B.css*** for selector "text" is applied globally for all elements with "text" selector.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702394437321/d66a8574-62ae-4ea6-a409-961aeebdb5f4.png align="center")

Is this what we wanted? No. We want A to be in red and B to be in blue. To avoid this problem we need to make the scope local. CSS modules let us do this.

---

CSS modules do not have an official specification nor are they a browser feature. They are part of a compilation process that executes against your project to convert scoped classes and selectors into CSS files that the browser can parse and understand. [Read more](https://developer.adobe.com/commerce/pwa-studio/guides/general-concepts/css-modules/#:~:text=CSS%20modules%20give%20you%20the,application%20using%20a%20modular%20approach.)

Bundlers like **Create React App**, **Vite** perform the compilation and generate unique class names.

**Modified Example:**

Rename the css files with **.*module.css*** extension.

***A.jsx***

```javascript
import styles from "./A.module.css";

function A() {
  return <div className={styles.text}>A</div>;
}

export default A;
```

***B.jsx***

```javascript
import styles from "./B.module.css";

function B() {
  return <div className={styles.text}>B</div>;
}

export default B;
```

Result :

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702401509402/07dd43ed-dd89-4c18-aa2b-ddfa364e3552.png align="center")

Reason:  
Each module generate unique *className* . Therefore encapsulation is achieved by limiting the scope to modules.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702403971341/8df68da2-ea94-4146-9519-6e864c1485aa.png align="center")

*If we inspect the webpage, we can see the className being unique across the modules.*

Yeah that's what we wanted! &lt;3