Q1. What are CSS Modules?
CSS Modules are CSS files where class names are scoped locally by default. When imported, they generate unique class names, preventing conflicts. In React, you can use CSS Modules by naming the file styles.module.css and importing as styles.
Q2. How do you use CSS Modules in a React component?
Create a file like Button.module.css with .btn { ... }. In the component, import styles from './Button.module.css'. Then use className={styles.btn}. The generated class name will be unique.
Q3. What are the benefits of CSS Modules?
They avoid global scope collisions, make styles component-specific, and encourage modular design. They also support composition and can be used with preprocessors.
Q4. Can you use multiple classes with CSS Modules?
Yes, you can combine classes using template literals: className={`${styles.btn} ${styles.primary}`}. Or use a library like classnames for conditional classes.
Q5. How do CSS Modules differ from regular CSS?
Regular CSS has global scope; CSS Modules are scoped locally by default. In regular CSS, you need to follow naming conventions like BEM to avoid conflicts; CSS Modules handle this automatically.