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.