CSS Modules in Remix - Step-by-Step Execution

Concept Flow - CSS Modules

Write CSS file with local styles

↓

Import CSS Module in component

↓

Use imported class names as object properties

↓

Render component with scoped class names

↓

Browser applies unique class names

↓

Styles apply only to this component

CSS Modules let you write CSS that is local to a component by importing styles as objects and using unique class names automatically.

Execution Sample

Remix

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

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

This code imports CSS Module styles and applies a scoped class to a button element.

Execution Table

Step	Action	Input/Code	Result/Effect
1	Read CSS file	.primary { color: blue; }	CSS parsed, class 'primary' noted
2	Generate unique class name	primary	Class renamed to 'Button_primary__abc123'
3	Import CSS Module	import styles from './Button.module.css';	styles = { primary: 'Button_primary__abc123' }
4	Render component	<button className={styles.primary}>	Button element with class 'Button_primary__abc123' created
5	Browser applies styles	class='Button_primary__abc123'	Button text color is blue, styles scoped
6	Other components	Use of 'primary' class elsewhere	No style conflict due to unique class names
7	Exit	Component rendered with scoped styles	Execution complete, styles isolated

💡 Component rendered with unique scoped class names, preventing style conflicts.

Variable Tracker

Variable	Start	After Import	After Render	Final
styles	undefined	{ primary: 'Button_primary__abc123' }	{ primary: 'Button_primary__abc123' }	{ primary: 'Button_primary__abc123' }
className	undefined	undefined	'Button_primary__abc123'	'Button_primary__abc123'

Key Moments - 2 Insights

Why does the class name in the HTML look different from the CSS file?

Because CSS Modules rename classes to unique names (like 'Button_primary__abc123') to avoid conflicts, as shown in step 2 of the execution table.

Can the same class name 'primary' in another component cause style conflicts?

No, each CSS Module generates unique class names per component, so 'primary' in another file becomes a different unique name, preventing conflicts (see step 6).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'styles.primary' after import?

A 'Button_primary__abc123'

B 'primary'

C undefined

D 'Button_primary'

💡 Hint

Check step 3 in the execution table where styles is assigned.

At which step does the browser apply the unique class name to the button element?

A Step 2

B Step 5

C Step 4

D Step 6

💡 Hint

Look for when styles affect the actual rendered element in the execution table.

If you rename the CSS class from 'primary' to 'main', what changes in the execution table?

A Step 5 styles no longer apply

B Step 3 import fails

C Step 2 unique class name changes to 'Button_main__xyz789'

D No changes at all

💡 Hint

Changing the CSS class name changes the unique generated class name as shown in step 2.

Concept Snapshot

CSS Modules let you write CSS scoped to components.
Import styles as objects in your component.
Use styles.className to apply unique class names.
Unique names prevent style conflicts.
Browser applies these unique classes at render.

Full Transcript

CSS Modules work by reading your CSS file and generating unique class names for each style. When you import the CSS Module in your component, you get an object mapping your original class names to these unique names. Using these in your JSX applies the unique class names to elements. This ensures styles only affect the component they belong to, avoiding conflicts with other components. The execution steps show reading CSS, generating unique names, importing styles, rendering with scoped classes, and browser applying styles. Variables like 'styles' hold the mapping, and 'className' holds the unique class applied. Beginners often wonder why class names look different in HTML; it's because of this unique renaming. Also, the same class name in different components won't clash because each gets a unique name. Changing a CSS class name changes the unique name generated, reflected in the import and render steps.