CSS Modules in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does CSS Modules scope styles in Remix?

Consider a Remix component importing a CSS Module file. What happens to the CSS class names when the component is rendered?

Remix

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

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

A The class name 'primary' is replaced with a unique generated name scoped to this component.

B The class name 'primary' is used as-is globally across the app.

C The CSS is ignored and no styles are applied to the button.

D The class name 'primary' is converted to inline styles automatically.

💡 Hint

Think about how CSS Modules prevent style conflicts by changing class names.

CSS Modules generate unique class names for each imported style to avoid conflicts. This means the 'primary' class is scoped locally and renamed in the final HTML.

📝 Syntax

intermediate

Which import statement correctly imports a CSS Module in Remix?

Given a CSS Module file named styles.module.css, which import statement is valid in a Remix component?

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

B import './styles.module.css';

C import * as styles from './styles.module.css';

D import styles from './styles.css';

💡 Hint

CSS Modules require importing the styles as an object to access class names.

To use CSS Modules, you import the CSS file as an object (default import) to access scoped class names. Importing without assignment or with wildcard is invalid for CSS Modules.

🔧 Debug

advanced

Why does this CSS Module style not apply in Remix?

Look at the code below. The button does not get styled as expected. What is the most likely cause?

Remix

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

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

A The CSS Module file is missing from the project directory.

B The className is a string literal and does not reference the imported styles object.

C Remix does not support CSS Modules for button elements.

D The styles.primary class is not defined in the CSS Module file.

💡 Hint

Check how the className is assigned in JSX when using CSS Modules.

Using className="styles.primary" treats it as a plain string, not the variable. It should be className={styles.primary} to apply the scoped class.

❓ state_output

advanced

What is the rendered class attribute value for this Remix component using CSS Modules?

Given the CSS Module Card.module.css with a class container, and this component:

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

export default function Card() {
  return <div className={styles.container}>Content</div>;
}

What will the class attribute look like in the browser?

A "undefined" (no class applied)

B "container" (the original class name as-is)

C "container_abc123" (a unique generated name with a hash suffix)

D "styles_container" (the imported object name prefixed)

💡 Hint

CSS Modules add unique hashes to class names to scope styles.

The class name is transformed to a unique string like 'container_abc123' to avoid conflicts. It is not the plain class name or the object name.

🧠 Conceptual

expert

Why are CSS Modules preferred over global CSS in Remix for large projects?

Choose the best explanation for why CSS Modules are often used instead of global CSS files in Remix applications.

A CSS Modules automatically convert CSS to inline styles, improving performance.

B Global CSS files are not supported in Remix, so CSS Modules are the only option.

C CSS Modules allow writing CSS in JavaScript syntax, which global CSS does not.

D CSS Modules scope styles locally, preventing unintended style overrides and making maintenance easier.

💡 Hint

Think about how style conflicts happen in big projects and how CSS Modules help.

CSS Modules create locally scoped class names, avoiding conflicts and making it easier to manage styles in large apps. They do not convert CSS to inline styles or require CSS-in-JS syntax.