Front End Development CSS Architecture & Design Systems 3

Question 1

What is a design system in front-end development?

Accepted Answer

A collection of reusable components, design tokens, guidelines, and documentation ensuring consistency across products

Answer

A design system is a comprehensive collection of reusable UI components, design tokens, usage guidelines, and documentation that establishes consistency across a product or product suite.

Question 2

What is CSS-in-JS?

Accepted Answer

A pattern where CSS styles are authored inside JavaScript files and scoped to components

Answer

CSS-in-JS is a pattern where CSS is written within JavaScript (often using tagged template literals), allowing component-scoped styles and dynamic styling based on JavaScript values.

Question 3

Which of the following is a popular CSS-in-JS library used with React?

Accepted Answer

styled-components

Answer

styled-components is a widely used CSS-in-JS library that uses tagged template literals to define component-scoped CSS styles directly in React JavaScript files.

Question 4

What is the utility-first CSS approach exemplified by Tailwind CSS?

Accepted Answer

Building interfaces by composing small, single-purpose utility classes directly in HTML markup

Answer

Utility-first CSS uses many small, single-purpose classes (like flex, text-center, p-4) applied directly in HTML to compose designs without writing custom CSS files.

Question 5

What problem do CSS Modules solve in large front-end projects?

Accepted Answer

They locally scope CSS class names to a component to prevent global namespace collisions

Answer

CSS Modules automatically scope class names locally to the component that imports them, preventing naming conflicts across the global CSS namespace in large applications.

Front End Development Practice Test

Front End Development Practice Test

Front End Development CSS Architecture & Design Systems 3