Why CSS Modules in Remix? - Purpose & Use Cases

The Big Idea

What if your styles never accidentally broke other parts of your app again?

The Scenario

Imagine building a website where every component shares the same CSS file. You try to style a button, but suddenly the styles affect other buttons or even unrelated parts of the page.

Changing one style breaks another in a different place, and you spend hours hunting down where the conflict started.

The Problem

Using global CSS means styles can clash easily. It's hard to know which styles apply where, leading to unexpected look changes.

This makes your code fragile, hard to maintain, and slows down your work as you fix bugs caused by style conflicts.

The Solution

CSS Modules solve this by giving each component its own scoped CSS. Styles are automatically isolated, so they only apply where you want them.

This keeps your styles clean, predictable, and easy to manage as your app grows.

Before vs After

✗ Before

button { color: red; } /* affects all buttons everywhere */

✓ After

import styles from './Button.module.css';
<button className={styles.redButton}>Click me</button>

What It Enables

With CSS Modules, you can confidently style components without worrying about breaking others, making your UI scalable and maintainable.

Real Life Example

Think of a large online store where the product card, header, and footer all have buttons. CSS Modules let each button look unique without style clashes, even though they share the same page.

Key Takeaways

Global CSS causes style conflicts and bugs.

CSS Modules scope styles to components automatically.

This makes styling predictable, safe, and easier to maintain.