Quiz for CSS Modules

Q1: What are CSS Modules in React?

A. CSS files scoped locally by default B. Global CSS files C. Inline styles D. CSS-in-JS libraries

Q2: How do you import a CSS Module in React?

A. import styles from "./styles.module.css"; B. import "./styles.css"; C. import styles from "./styles.css"; D. require("./styles.module.css");

Q3: How do you apply a class from a CSS Module to a React element?

A. <div className={styles.className}> B. <div className="className"> C. <div style={styles.className}> D. <div id={styles.className}>

Q4: What file extension is commonly used for CSS Modules?

A. .module.css B. .css C. .scss D. .js

Q5: Do CSS Modules generate unique class names?

A. Yes, to avoid global conflicts B. No, classes are global C. Only if configured D. No, they use inline styles

Q6: Can CSS Modules be used with Sass?

A. Yes, with .module.scss files B. No, only plain CSS C. Only with PostCSS D. Only with CSS-in-JS

Q7: What happens if you use the same class name in two CSS Modules?

A. They remain scoped and do not conflict B. They overwrite each other C. They merge styles D. Error during build

Q8: How do CSS Modules differ from global CSS?

A. They scope styles locally to components B. They are globally applied C. They inline styles D. They require JS

Q9: Can you combine CSS Modules with global CSS?

A. Yes, you can use both together B. No, must choose one C. Only with configuration D. Only if using styled-components

Q10: How does CSS Modules help in large projects?

A. By preventing style conflicts B. By increasing CSS file size C. By disabling caching D. By using inline styles

Q11: Is CSS Modules supported by Create React App by default?

A. Yes, it supports CSS Modules out of the box B. No, requires extra setup C. Only in eject mode D. Only with plugins

Q12: How can you apply multiple CSS Module classes to a component?

A. By using template literals or classnames library B. By using arrays in className C. By comma-separated strings D. By inline styles only

Q13: What does the class name look like in the DOM when using CSS Modules?

A. A unique hashed string B. Plain class name C. ID selector D. Inline styles

Q14: Can CSS Modules include media queries?

A. Yes, just like normal CSS B. No, only basic selectors C. Only in global CSS D. Only with JavaScript

Q15: Are CSS Modules compatible with server-side rendering?

A. Yes, fully compatible B. No, client-side only C. Only with caching D. Only with hydration

Q16: Can CSS Modules be used with TypeScript?

A. Yes, with proper typings B. No C. Only with plugins D. Only for JavaScript

Q17: What tool is commonly used to combine multiple class names with CSS Modules?

A. classnames B. lodash C. redux D. axios

Q18: How do you disable CSS Modules for a file?

A. By not using the .module.css extension B. By config setting C. By environment variable D. By using inline styles

Q19: Do CSS Modules support pseudo-classes like :hover?

A. Yes, all CSS selectors are supported B. No, only basic selectors C. Only inline styles D. Only JavaScript

Q20: How do CSS Modules handle animations?

A. Animations are scoped and work as usual B. Animations do not work C. Only global animations work D. Only keyframes allowed