CSS Modules in Remix - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are CSS Modules?

CSS Modules are a way to write CSS where class names are scoped locally by default. This means styles apply only to the component they belong to, avoiding conflicts.

beginner

How do CSS Modules help in large projects?

They prevent style conflicts by scoping CSS locally, making it easier to maintain and update styles without accidentally affecting other parts of the app.

intermediate

How do you import and use a CSS Module in a Remix component?

You import the CSS file as an object, then use its properties as class names in your JSX. For example:<br><code>import styles from './Button.module.css';<br>&lt;button className={styles.primary}&gt;Click&lt;/button&gt;</code>

intermediate

Why do CSS Modules generate unique class names?

They create unique class names by combining the original name with a hash. This ensures styles don’t clash even if different components use the same class names.

beginner

Can CSS Modules be used with global styles?

Yes, you can still use global CSS files for styles that should apply everywhere. CSS Modules are best for component-specific styles.

What is the main benefit of using CSS Modules?

A They make CSS load faster

B They replace the need for CSS variables

C They automatically convert CSS to JavaScript

D They scope CSS locally to avoid conflicts

CSS Modules scope CSS locally to prevent style conflicts between components.

How do you apply a CSS Module class in a Remix component?

A Use the class name as a string directly

B Write styles inline in the component

C Import the CSS file and use the class as a property of the import

D Use a global CSS file only

You import the CSS Module and use its properties as class names in your JSX.

What does a CSS Module filename usually end with?

A .module.css

B .cssmodule

C .style.css

D .css

CSS Modules typically use the '.module.css' extension to distinguish them from regular CSS files.

Can CSS Modules be combined with global CSS files?

A No, they cannot be used together

B Yes, global CSS is for shared styles, CSS Modules for component styles

C Only if you rename the files

D Only in development mode

Global CSS files handle shared styles, while CSS Modules scope styles to components.

Why do CSS Modules generate unique class names?

A To avoid style conflicts between components

B To make CSS files smaller

C To improve browser compatibility

D To enable CSS animations

Unique class names prevent styles from different components from interfering with each other.

Explain how CSS Modules help avoid style conflicts in a web app.

Think about how styles can accidentally affect other parts of a page.

Describe the steps to use a CSS Module in a Remix component.

Focus on how you connect the CSS file to the component code.