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.

Practice

1. What is the main benefit of using CSS Modules in Astro components?

easy

A. They keep styles local to components, avoiding conflicts.

B. They automatically minify CSS for faster loading.

C. They allow inline styles directly in HTML tags.

D. They enable global styles to override component styles.

Solution

1. Step 1: Understand CSS Modules purpose

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

2. Step 2: Compare options

   Only They keep styles local to components, avoiding conflicts. correctly describes this main benefit; others describe unrelated features.

3. Final Answer:

   They keep styles local to components, avoiding conflicts. -> Option A

4. Quick Check:

   CSS Modules = Local styles [OK]

Hint: Remember CSS Modules isolate styles to components [OK]

Common Mistakes:

• Thinking CSS Modules minify CSS automatically
• Confusing CSS Modules with inline styles
• Assuming CSS Modules create global styles

2. Which is the correct way to import a CSS Module file named styles.module.css in an Astro component?

easy

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

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

C. const styles = require('./styles.module.css');

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

Solution

1. Step 1: Identify correct import syntax for CSS Modules

   CSS Modules require importing the CSS file as an object, typically with import styles from './filename.module.css';.

2. Step 2: Check file extension and import style

   import styles from './styles.module.css'; uses the correct file extension and import syntax. import './styles.module.css'; imports without assigning, C uses CommonJS which is not standard in Astro, and D imports a non-module CSS file.

3. Final Answer:

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

4. Quick Check:

   Import CSS Modules as objects with .module.css [OK]

Hint: Use import with .module.css and assign to a variable [OK]

Common Mistakes:

• Forgetting to assign import to a variable
• Using require instead of import
• Importing non-module CSS files as modules

3. Given the CSS Module import import styles from './button.module.css'; and the CSS file containing .primary { color: blue; }, what will be the rendered class attribute for <button class={styles.primary}>Click</button>?

medium

A. class="button_primary__abc123"

B. class="primary"

C. class="styles.primary"

D. class="undefined"

Solution

1. Step 1: Understand CSS Modules class naming

   CSS Modules transform class names to unique strings like button_primary__abc123 to avoid conflicts.

2. Step 2: Analyze the rendered class attribute

   Using styles.primary applies the transformed unique class name, not the original 'primary'. So the class attribute will be a unique hashed string.

3. Final Answer:

   class="button_primary__abc123" -> Option A

4. Quick Check:

   CSS Modules generate unique class names [OK]

Hint: CSS Modules rename classes to unique strings [OK]

Common Mistakes:

• Expecting original class name without transformation
• Using the variable name as class string
• Getting undefined if import is wrong

4. What is wrong with this Astro component code using CSS Modules?

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

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

medium

A. The component must be a class, not a function.

B. The class attribute should use curly braces, not quotes.

C. The import statement is missing the .module.css extension.

D. CSS Modules cannot be used in Astro components.

Solution

1. Step 1: Check how class names are applied with CSS Modules

   CSS Modules require using curly braces to insert the imported class object value, e.g., class={styles.card}.

2. Step 2: Identify the error in the code

   The code uses quotes around "styles.card", which treats it as a string literal, not the variable. This causes the class to be literally 'styles.card' instead of the hashed class.

3. Final Answer:

   The class attribute should use curly braces, not quotes. -> Option B

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 class binding
• Forgetting .module.css in import
• Thinking Astro requires class components

5. How can you apply multiple CSS Module classes styles.primary and styles.rounded to a single element in an Astro component?

hard

A. <div class={styles.primary, styles.rounded}>Content</div>

B. <div class="styles.primary styles.rounded">Content</div>

C. <div class={`${styles.primary} ${styles.rounded}`}>Content</div>

D. <div class={styles.primary + styles.rounded}>Content</div>

Solution

1. Step 1: Understand combining multiple CSS Module classes

   To apply multiple classes, you join their values as strings separated by spaces, typically using template literals or string concatenation.

2. Step 2: Analyze each option

   <div class={`${styles.primary} ${styles.rounded}`}>Content</div> correctly uses template literals to combine classes with a space. <div class="styles.primary styles.rounded">Content</div> treats class names as literal strings, not variables. <div class={styles.primary + styles.rounded}>Content</div> concatenates without space, merging class names incorrectly. <div class={styles.primary, styles.rounded}>Content</div> uses comma which is invalid syntax.

3. Final Answer:

   <div class={`${styles.primary} ${styles.rounded}`}>Content</div> -> Option C

4. Quick Check:

   Join CSS Module classes with space in template literals [OK]

Hint: Use template literals with spaces to combine CSS Module classes [OK]

Common Mistakes:

• Using quotes instead of variables for class names
• Concatenating without spaces
• Using commas inside class attribute