CSS Overview Quiz

What is the problem with global CSS for the Dropdown Component?

• It can be easily overwritten by CSS in the App

• It cannot be used with React components

• It causes conflicts with JavaScript code

• It increases the file size of the component

What is the main goal of using CSS in JS (Styled Component)?

• To automatically generate critical CSS

• To make class name bugs easier to fix

• To encapsulate CSS within the component

• To eliminate the need for media queries

How can you add styles to a button when it is clicked using Styled Component?

• Use :hover pseudo selector

• Use :active pseudo selector

• Use :focus pseudo selector

• Use :visited pseudo selector

Does Styled Component support responsive styles?

• Yes, by using inline styles

• No, it requires a separate library for responsive styles

• Yes, by using @media queries

• No, it only supports static styles

What is the benefit of using CSS Module?

• It allows for global scope in CSS

• It simplifies the build step process

• It increases the file size of the component

• It prevents the need for media queries

How does CSS Module handle pseudo selectors?

• By using a special syntax for pseudo selectors

• By using separate classes for pseudo selectors

• By ignoring pseudo selectors completely

• By using the same class for all selectors

What is the purpose of using keyframes in CSS Module?

• To define responsive media queries

• To generate critical CSS

• To create animations

• To handle class name bugs

Can you inherit and override styles of another Styled Component in CSS Module?

• No, it is not possible in CSS Module

• Yes, by using the extend keyword

• No, it requires a separate library for inheritance

• Yes, by passing the component to the styled function

What is the recommended approach for localizing CSS in React?

• Inline CSS

• All of the above

• CSS Module

• CSS in external files

What are the benefits of using Styled Components?

• Automatic critical CSS generation

• Easier deletion of CSS

• Simple dynamic styling

• All of the above