CSS Modules support in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of CSS Modules in Astro?

CSS Modules help keep CSS styles local to a component, avoiding conflicts by generating unique class names automatically.

beginner

How do you import a CSS Module in an Astro component?

You import the CSS file as an object using <code>import styles from './filename.module.css';</code> and then use the styles as <code>class={styles.className}</code>.

intermediate

Why is using CSS Modules better than global CSS in component-based frameworks?

Because CSS Modules scope styles locally, they prevent style clashes and make components easier to maintain and reuse.

beginner

What file extension is typically used for CSS Modules in Astro?

The file extension is .module.css to indicate the CSS file should be treated as a module.

intermediate

How does Astro handle CSS Modules during build time?

Astro processes CSS Modules by generating unique class names and linking them to the imported styles object, ensuring styles apply only to the component.

What does importing a CSS Module in Astro return?

A An object mapping class names to unique generated names

B A string with all CSS content

C A function to apply styles

D A global CSS stylesheet

Importing a CSS Module returns an object where keys are original class names and values are unique generated class names.

Which file extension indicates a CSS Module in Astro?

A .css

B .module.css

C .astro.css

D .style.css

The '.module.css' extension tells Astro to treat the CSS file as a module with scoped styles.

Why should you use CSS Modules in Astro components?

A To avoid style conflicts by scoping styles locally

B To disable CSS caching

C To write global styles faster

D To inline CSS in JavaScript

CSS Modules scope styles locally to components, preventing conflicts and improving maintainability.

How do you apply a CSS Module class to an element in Astro?

A Use <code>class="className"</code>

B Use <code>id={styles.className}</code>

C Use <code>style={styles.className}</code>

D Use <code>class={styles.className}</code>

You apply the class by referencing the imported styles object with class={styles.className}.

What happens if two components use the same CSS class name in CSS Modules?

A They share the same style globally

B Astro throws an error

C Each gets a unique generated class name to avoid conflicts

D The last imported style overrides the others

CSS Modules generate unique class names per component, so same class names do not conflict.

Explain how CSS Modules help manage styles in Astro components.

Think about how styles stay inside one component without affecting others.

Describe the steps to use a CSS Module in an Astro component from file creation to applying styles.

Start from the CSS file and end with how the styles appear on the page.