CSS
275 bites tagged CSS: interview questions with model answers, and 60-second explainers.
Test yourself: Top 30 CSS interview questions →Multiple choice, with the correct answer and why it is correct on every question. Free, no sign-in.Fixing text overflow from long localized labels
Avoid fixed widths, use flexible layouts, allow wrapping or word-break, ellipsis as last resort, pseudo-localize to test.
CSS custom properties versus Sass for theming
Custom properties are live and cascade for dynamic switching; Sass variables compile away.
Implementing light and dark mode on the web
CSS custom properties for color tokens, a data-theme attribute toggle, and prefers-color-scheme as default.
Adapting CSS for Forced Colors Mode
Use semantic HTML and system color keywords, the forced-colors media query, forced-color-adjust sparingly.
CSS-in-JS vs pre-compiled CSS for distribution
Runtime cost and dynamic theming of CSS-in-JS versus cacheability and SSR simplicity of static CSS.
Component variants with BEM modifier classes
A base block class holds shared styles, modifier classes (block--primary, block--destructive) layer only the differences, and you combine base plus one modifier.
CSS transition versus animation
Transitions interpolate between two states triggered by a change; animations use keyframes for multi-step, looping, autonomous motion.
CSS Grid versus Flexbox fundamentals
Flexbox is one-dimensional (a single row or column), Grid is two-dimensional (rows and columns together); use Grid for page layout, Flexbox for a toolbar of items.
Brand color as a token and CSS custom property
Define a typed color token in JSON, generate a custom property like --color-brand-primary, then reference it with var().
CSS Modules versus BEM for encapsulation
CSS Modules scope via build-time hashed class names automatically; BEM scopes via disciplined human naming with no tooling.
Center a div with Flexbox on the parent
Set display flex on parent, justify-content center for the main axis, align-items center for the cross axis.
Structure CSS layers for reset, vendor, and components
Declare layer order upfront, place reset earliest, vendor next, your components last so they win.
What problem do CSS Cascade Layers solve?
Layers create explicit priority bands, layer order beats specificity inside, and you control override without selector hacks.
What design tokens are and why they matter
Tokens are named, platform-agnostic design decisions stored centrally, enabling consistency, theming, and one-place updates.
How BEM tames specificity and !important
BEM names block, element, modifier as flat single classes, keeping specificity low and equal, removing the need for deep selectors and !important.
Performance concerns with the :has() selector
:has() forces upward and forward style invalidation on DOM changes, broad subjects are costly; mitigate by scoping the subject, avoiding deep or universal arguments, and limiting dynamic…
Building a container-query-driven card component
Declare a wrapper container with container-type, query it with @container, restyle the card's internal grid by container width, optionally use cqi units.
Why Oklch beats HSL for color variations
HSL lightness is not perceptually uniform so equal steps look uneven, Oklch keeps perceived lightness consistent across hues, giving predictable hover and palette scales.
Styling a parent with the :has() selector
:has() matches an element that contains or relates to a given selector, enabling upward styling; figure:has(figcaption) targets captioned figures.
When container queries beat media queries
Media queries react to viewport, container queries react to a parent's size, ideal for reusable components; set container-type on an ancestor then query it.
Native CSS nesting and the parent selector
Nest rules inside a block, descendant selectors combine implicitly, & references the parent and is required for compound or pseudo-class joins.
CSS logical properties versus physical properties
Logical properties map to flow direction not fixed sides, padding-inline-start follows text direction, benefit is automatic RTL and vertical support.
Declaring and scoping CSS custom properties
Declare with --name, read with var(), :root makes it global while a class scopes it locally.
Why design systems use Sass or PostCSS
Sass adds variables, nesting, mixins, and functions for reuse; PostCSS transforms CSS via plugins like autoprefixer.
Get CSS bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.