CSS Modules support in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does CSS Modules scope styles in Astro components?

Consider an Astro component using CSS Modules. What happens to the CSS class names when the component is rendered in the browser?

Astro

<style module>
.button {
  color: red;
}
</style>

<button class={styles.button}>Click me</button>

A The class name is replaced with a unique hashed name to avoid conflicts.

B The class name remains exactly as 'button' in the browser DOM.

C The class name is removed and styles are applied inline instead.

D The class name is prefixed with the component file name but otherwise unchanged.

💡 Hint

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

CSS Modules automatically generate unique class names by hashing the original class name and file path. This ensures styles are scoped locally to the component and do not clash with other styles.

📝 Syntax

intermediate

Correct syntax to import CSS Modules in Astro

Which of the following is the correct way to import and use a CSS Module file named Button.module.css in an Astro component?

A

import './Button.module.css';
<button class='button'>Click</button>

B

import styles from './Button.module.css';
<button class={styles.button}>Click</button>

C

const styles = require('./Button.module.css');
<button class={styles.button}>Click</button>

D

<style module src='./Button.module.css'></style>
<button class={styles.button}>Click</button>

💡 Hint

Astro supports ES module imports for CSS Modules.

In Astro, CSS Modules are imported as ES modules using import styles from './filename.module.css'. This allows you to access scoped class names via the styles object.

🔧 Debug

advanced

Why does the CSS Module class not apply styles?

Given this Astro component code, the styles from the CSS Module are not applied. What is the most likely cause?

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


  Card content

A The class attribute should use curly braces: <code>class={styles.card}</code> instead of quotes.

B The CSS Module file must be named <code>Card.css</code> without <code>.module</code>.

C The import statement should use require() instead of import.

D The styles object is undefined because CSS Modules are not supported in Astro.

💡 Hint

Check how dynamic class names are passed in JSX-like syntax.

In Astro, to use a class from a CSS Module, you must use curly braces to evaluate the JavaScript expression. Using quotes treats it as a literal string, so the styles won't apply.

❓ state_output

advanced

What is the rendered class attribute value?

Given this Astro component using CSS Modules, what will be the exact value of the class attribute in the rendered HTML?

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

Warning!

Assume the original CSS class is alert and Astro generates a hash _Alert_alert_1a2b3.

A "styles.alert"

B "Alert_alert"

C "alert"

D "_Alert_alert_1a2b3"

💡 Hint

CSS Modules replace class names with unique hashed names.

The class name is replaced by a unique hashed string combining the component name, original class, and a hash to ensure uniqueness and avoid conflicts.

🧠 Conceptual

expert

Why use CSS Modules in Astro instead of global CSS?

Which of the following is the best explanation for why CSS Modules are preferred over global CSS in Astro projects?

A CSS Modules load styles faster because they are compiled to inline styles in the browser.

B Global CSS cannot be used in Astro projects because Astro does not support CSS files.

C CSS Modules automatically scope styles locally, preventing unintended style conflicts across components.

D CSS Modules allow writing CSS in JavaScript syntax, making styles easier to write.

💡 Hint

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

CSS Modules scope styles to the component, so styles do not leak or override other components' styles. This avoids bugs and makes maintenance easier.