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 specialized software tool used exclusively by graphic designers

Answer

A CSS framework like Bootstrap or Tailwind CSS

Answer

A color palette and typography generator for web projects

Question 2

What is CSS-in-JS?

Accepted Answer

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

Answer

A method of writing inline CSS attributes using JavaScript object syntax

Answer

A build tool that converts JavaScript modules into CSS output

Answer

A browser API for programmatically modifying the CSSOM

Question 3

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

Accepted Answer

styled-components

Answer

jQuery UI

Answer

Bootstrap

Answer

Normalize.css

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

Writing CSS utilities only for utility and helper pages

Answer

Automatically generating CSS utility classes from JavaScript component definitions

Answer

Prioritizing performance-critical CSS properties over decorative styles

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

They reduce the number of HTTP requests needed to load stylesheets

Answer

They enable CSS to be loaded asynchronously for performance

Answer

They provide a way to write vendor-prefixed properties once for all browsers

Question 6

What is the Atomic CSS methodology?

Accepted Answer

Creating very small, immutable, single-purpose classes where each class applies exactly one CSS property

Answer

Using CSS for particle physics and atom-level animation effects

Answer

Organizing all CSS in a single monolithic file for atomic delivery

Answer

Splitting CSS across many files that are loaded independently per route

Question 7

What is the primary benefit of using a component library as part of a design system?

Accepted Answer

It provides pre-built, tested, accessible UI components that enforce consistency and accelerate development

Answer

It eliminates the need for designers to collaborate with developers

Answer

It automatically generates backend API endpoints matching the UI structure

Answer

It replaces the need for CSS by using inline JavaScript styles exclusively