CSS Modules in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does CSS Modules scope class names?

Given a Next.js component using CSS Modules, what will be the class name applied in the browser?

NextJS

/* styles.module.css */
.button {
  color: red;
}

// Component.jsx
import styles from './styles.module.css';
export default function Button() {
  return <button className={styles.button}>Click me</button>;
}

A A unique hashed class name like 'button_xyz123' scoped to this component

B The literal class name 'button' applied globally

C No class name applied because CSS Modules disables styling

D A random string unrelated to 'button' or the file name

💡 Hint

CSS Modules automatically creates unique class names to avoid conflicts.

CSS Modules generate unique class names by combining the original class name with a hash. This prevents styles from leaking globally.

📝 Syntax

intermediate

Identify the correct import statement for CSS Modules in Next.js

Which import statement correctly imports a CSS Module file in a Next.js component?

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

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

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

D import styles from './styles.module.scss';

💡 Hint

CSS Modules require the '.module.css' extension and default import.

Next.js requires CSS Modules to have the '.module.css' extension and be imported as a default import to get the scoped class names.

🔧 Debug

advanced

Why does this CSS Module class not apply styles?

Consider this Next.js component and CSS Module. Why is the button not red?

NextJS

/* styles.module.css */
.button {
  color: red;
}

// Component.jsx
import styles from './styles.module.css';
export default function Button() {
  return <button className="button">Click me</button>;
}

A The CSS file is missing an import statement in the component.

B The className should use styles.button, not the string 'button', to apply scoped styles.

C CSS Modules do not support the 'color' property.

D The button element must be wrapped in a div for styles to apply.

💡 Hint

Check how class names are referenced when using CSS Modules.

Using className="button" applies a global class 'button' which does not exist. The correct way is className={styles.button} to use the scoped class.

❓ state_output

advanced

What is the rendered class attribute value?

Given this Next.js component using CSS Modules, what is the exact class attribute in the rendered HTML?

NextJS

/* styles.module.css */
.title {
  font-weight: bold;
}

// Title.jsx
import styles from './styles.module.css';
export default function Title() {
  return <h1 className={styles.title}>Hello</h1>;
}

A class="styles_title" (the variable name as string)

B class="title" (the plain class name)

C class="title_abc123" (a unique hashed class name)

D No class attribute is rendered

💡 Hint

CSS Modules transform class names to unique hashes.

CSS Modules generate a unique class name combining the original name and a hash to avoid conflicts.

🧠 Conceptual

expert

Why prefer CSS Modules over global CSS in Next.js?

Which is the main advantage of using CSS Modules instead of global CSS files in Next.js projects?

A CSS Modules load styles faster than global CSS files.

B CSS Modules automatically convert CSS to inline styles.

C CSS Modules allow writing CSS inside JavaScript files without separate CSS files.

D CSS Modules scope styles locally to components, preventing style conflicts across the app.

💡 Hint

Think about how styles affect other parts of the app.

CSS Modules scope styles locally, so styles do not leak or override each other globally, making maintenance easier.

Practice

1. What is the main benefit of using CSS Modules in a Next.js project?

easy

A. They enable global CSS styles to override component styles.

B. They automatically minify CSS files for faster loading.

C. They scope CSS styles locally to components, avoiding conflicts.

D. They allow CSS to be written inside JavaScript files only.

Solution

1. Step 1: Understand CSS Modules purpose

   CSS Modules scope CSS locally to components, so styles don't leak or conflict.

2. Step 2: Compare options with this purpose

   Only They scope CSS styles locally to components, avoiding conflicts. describes this key benefit. Others describe unrelated features.

3. Final Answer:

   They scope CSS styles locally to components, avoiding conflicts. -> Option C

4. Quick Check:

   CSS Modules = Local scoped styles [OK]

Hint: Remember: CSS Modules isolate styles per component [OK]

Common Mistakes:

• Thinking CSS Modules minify CSS automatically
• Confusing CSS Modules with CSS-in-JS
• Believing CSS Modules create global styles

2. Which of the following is the correct way to import a CSS Module file named Button.module.css in a Next.js component?

easy

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

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

C. import './Button.module.css';

D. import styles from './Button.cssmodule';

Solution

1. Step 1: Identify correct file extension for CSS Modules

   Next.js requires CSS Modules files to end with .module.css.

2. Step 2: Check import syntax

   Importing with import styles from './Button.module.css'; correctly imports the module as an object.

3. Final Answer:

   import styles from './Button.module.css'; -> Option B

4. Quick Check:

   Import CSS Modules with .module.css and assign to variable [OK]

Hint: Always use .module.css extension and import with 'from' [OK]

Common Mistakes:

• Using wrong file extension like .css or .cssmodule
• Importing without assigning to a variable
• Forgetting the .module part in filename

3. Given the CSS Module styles.module.css with content:

.title { color: red; }

And the React component:

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

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

What color will the <h1> text be when rendered?

medium

A. Red

B. Black (default)

C. Blue

D. Green

Solution

1. Step 1: Check CSS Module style for .title

   The CSS sets .title color to red.

2. Step 2: Confirm component uses styles.title as className

   The component applies className={styles.title}, so the red color applies.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   CSS Module class applied = red text [OK]

Hint: ClassName from styles object applies CSS Module styles [OK]

Common Mistakes:

• Assuming default black color without checking CSS
• Confusing CSS Modules with global CSS
• Not using styles.title but a string instead

4. What is wrong with this Next.js component using CSS Modules?

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

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

medium

A. The component must be a class component to use CSS Modules.

B. The CSS file should be imported with a different name.

C. The CSS Module file must be named Card.css, not Card.module.css.

D. The className should use curly braces, not quotes, to apply styles.card.

Solution

1. Step 1: Identify how className is assigned

   The code uses className="styles.card", which is a string literal, not the variable.

2. Step 2: Correct syntax for applying CSS Module class

   It should be className={styles.card} to use the imported styles object.

3. Final Answer:

   The className should use curly braces, not quotes, to apply styles.card. -> Option D

4. Quick Check:

   Use curly braces to apply CSS Module classes [OK]

Hint: Use {styles.className}, not "styles.className" for CSS Modules [OK]

Common Mistakes:

• Using quotes instead of curly braces for className
• Renaming CSS Module file incorrectly
• Thinking CSS Modules require class components

5. You want to style a Next.js component with two CSS Module classes: primary and large from Button.module.css. Which is the correct way to apply both classes to a <button> element?

hard

A. Click

B. Click

C. Click

D. Click

Solution

1. Step 1: Understand how to combine multiple CSS Module classes

   Use template literals or string concatenation to combine classes as strings.

2. Step 2: Evaluate each option

   Click uses template literals correctly to combine classes with a space.
   Click uses a string literal, so classes won't apply.
   Click concatenates without space, merging class names incorrectly.
   Click passes an array, which React does not accept as className.

3. Final Answer:

   <button className={`${styles.primary} ${styles.large}`}>Click</button> -> Option A

4. Quick Check:

   Combine CSS Module classes with template literals [OK]

Hint: Use backticks and ${} to combine multiple CSS Module classes [OK]

Common Mistakes:

• Using quotes instead of variables for className
• Concatenating without spaces between classes
• Passing arrays directly to className