CSS Modules in Remix

Introduction

CSS Modules help keep styles organized and avoid conflicts by making CSS class names unique to each component.

When you want to style a component without affecting other parts of the app.

When multiple developers work on the same project and need to avoid style clashes.

When you want to write CSS that is easy to maintain and debug.

When you want to use CSS with JavaScript frameworks like Remix safely.

When you want to scope styles locally to components automatically.

Syntax

Remix

import styles from './ComponentName.module.css';

function ComponentName() {
  return <div className={styles.className}>Hello</div>;
}

CSS files must be named with .module.css to use CSS Modules.

Imported styles are objects where keys are class names and values are unique generated names.

Examples

This example shows a button styled with a CSS Module. The class button is scoped locally.

Remix

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 1rem;
}

// Button.jsx
import styles from './Button.module.css';

export function Button() {
  return <button className={styles.button}>Click me</button>;
}

Here, the header title uses a CSS Module class to apply styles only to this component.

Remix

/* Header.module.css */
.title {
  font-size: 2rem;
  color: green;
}

// Header.jsx
import styles from './Header.module.css';

export function Header() {
  return <h1 className={styles.title}>Welcome</h1>;
}

Sample Program

This React component uses a CSS Module to style a card. The styles are scoped only to this component, so they won't affect other parts of the app.

Remix

/* styles.module.css */
.container {
  border: 2px solid #333;
  padding: 1rem;
  border-radius: 0.5rem;
  max-width: 300px;
  margin: 1rem auto;
  text-align: center;
  background-color: #f0f0f0;
}

/* Component.jsx */
import React from 'react';
import styles from './styles.module.css';

export function Card() {
  return (
    <div className={styles.container} role="region" aria-label="Card container">
      <h2>CSS Modules Example</h2>
      <p>This card is styled using CSS Modules.</p>
    </div>
  );
}

Important Notes

CSS Modules generate unique class names automatically to avoid conflicts.

Use semantic HTML and ARIA labels for better accessibility when styling components.

CSS Modules work well with Remix and other React-based frameworks for scoped styling.

Summary

CSS Modules keep styles local to components to avoid clashes.

They require naming CSS files with .module.css.

Use them to write clean, maintainable, and safe CSS in Remix apps.