101. Which CSS framework uses utility classes like "flex" and "p-4"?
- a) Tailwind CSS
- b) Bootstrap
- c) Foundation
- d) Bulma
Answer: A - Tailwind is a utility-first framework with atomic classes like
bg-blue-500.
102. Which Bootstrap class creates a responsive 12-column grid?
- a) .row
- b) .grid
- c) .col
- d) .container
Answer: A - Bootstrap's
.row wraps .col-* columns in a flex container.
103. Which CSS-in-JS library uses tagged template literals?
- a) styled-components
- b) Emotion
- c) Both a and b
- d) JSS
Answer: C - Both libraries use syntax like
const Button = styled.button`color: red`.
104. Which tool analyzes CSS for unused rules?
- a) PurgeCSS
- b) CSSNano
- c) PostCSS
- d) UnCSS
Answer: A - PurgeCSS removes unused CSS by analyzing your HTML/JS.
105. Which CSS property visually hides content while keeping it accessible to screen readers?
- a) clip-path: inset(50%)
- b) visibility: hidden
- c) display: none
- d) .sr-only pattern
Answer: D - The screen-reader-only pattern combines multiple properties for accessibility.
106. Which Chrome DevTools feature traces CSS cascade conflicts?
- a) Computed tab
- b) Styles pane strikethroughs
- c) Coverage tool
- d) Layers panel
Answer: B - Strikethroughs in Styles pane show overridden declarations.
107. Which CSS optimizer removes comments and whitespace?
- a) CSSNano
- b) CleanCSS
- c) Both a and b
- d) Prettier
Answer: C - Both tools minify CSS by removing unnecessary characters.
108. Which PostCSS plugin adds vendor prefixes automatically?
- a) Autoprefixer
- b) PrefixFree
- c) PostCSS-Preset-Env
- d) cssnext
Answer: A - Autoprefixer uses Can I Use data to add prefixes like
-webkit-.
109. Which CSS feature isolates styles to prevent leakage?
- a) Shadow DOM
- b) CSS Modules
- c) Both a and b
- d) @namespace
Answer: C - Shadow DOM scopes styles natively, while CSS Modules does it via class hashing.
110. Which tool generates CSS stats like specificity graph?
- a) CSS Stats
- b) Parker
- c) Both a and b
- d) Lighthouse
Answer: C - Both analyze CSS for metrics like selector complexity.
111. Which CSS methodology promotes single-purpose utility classes?
- a) Atomic CSS
- b) BEM
- c) SMACSS
- d) OOCSS
Answer: A - Atomic CSS uses small, immutable classes like
.m-1 for margin.
112. Which CSS framework is known for its flexbox-based grid?
- a) Bulma
- b) Bootstrap 4+
- c) Both a and b
- d) Foundation
Answer: C - Both frameworks use flexbox for their grid systems.
113. Which CSS-in-JS feature generates unique class names?
- a) Automatic scoping
- b) Critical CSS extraction
- c) Theming
- d) SSR support
Answer: A - Libraries like styled-components hash class names to prevent collisions.
114. Which tool helps visualize CSS box models?
- a) Chrome DevTools Box Model Viewer
- b) CSS Box Model Generator
- c) Pesticide extension
- d) All of the above
Answer: D - All tools help debug margins, borders, and padding.
115. Which CSS feature prevents layout shifts by reserving space?
- a) aspect-ratio
- b) content-visibility
- c) contain-intrinsic-size
- d) All of the above
Answer: D - All help optimize Cumulative Layout Shift (CLS) metrics.
116. Which CSS property improves font rendering?
- a) font-smoothing
- b) text-rendering
- c) Both a and b
- d) font-rendering
Answer: C -
-webkit-font-smoothing: antialiased and text-rendering: optimizeLegibility enhance readability.
117. Which CSS framework uses a "mobile-first" breakpoint system?
- a) Bootstrap
- b) Foundation
- c) Both a and b
- d) Bulma
Answer: C - Both frameworks default to mobile styles with
min-width media queries.
118. Which CSS tool enables writing nested rules like Sass?
- a) PostCSS Nesting
- b) Less
- c) Both a and b
- d) CSS Nesting (native)
Answer: C - PostCSS plugins and Less/Sass all support nesting (now also native in modern browsers).
119. Which CSS technique creates responsive typography?
- a) clamp()
- b) Viewport units (vw)
- c) Fluid typography formulas
- d) All of the above
Answer: D -
font-size: clamp(1rem, 2vw, 1.5rem) combines these approaches.
120. Which CSS feature enables conditional logic in styles?
- a) @when/@else (proposed)
- b) CSS Custom Properties with calc()
- c) Sass @if rules
- d) All of the above
Answer: D - Native CSS conditionals are emerging, while Sass/Script solutions exist today.