CSS
275 bites tagged CSS — interview questions with model answers, and 60-second explainers.
Respecting prefers-reduced-motion in a design system
Gate CSS animations behind the media query, read the same preference in JS via matchMedia, and centralize motion tokens. Building motion accessibility into system architecture. killing all motion instead of reducing it.
Reusable Button with hover, focus, disabled
Use a real <button>, style :hover, a visible :focus-visible ring, and the [disabled] attribute that also blocks interaction. semantic, accessible button states. a clickable <div> or removing focus outlines.
Integrating design tokens with Tailwind CSS
Feed tokens into Tailwind's theme config (or v4 CSS theme) so utilities derive from one source; a parallel setup causes drift. tokens plus utility-first integration. maintaining tokens and Tailwind values separately.
Support a one-off that deviates from the system
Offer sanctioned escape hatches like custom-property overrides, scope the one-off to the app not the library, track it for promotion or removal. balancing flexibility with system integrity. forking core components.
What are design tokens?
Platform-agnostic name-value pairs for design values, transformed into CSS variables or platform code, consumed by components by name. tokens as named design decisions. equating a token with a raw hex used inline.
Build a custom PostCSS plugin (px to rem)
Export a plugin returning visitor hooks, walk Declaration nodes, parse and rewrite px values to rem against a base size. PostCSS as an AST transformer. treating CSS as a regex string, not a parsed tree.
Diagnose and shrink a large CSS bundle
Purge unused selectors, minify and merge with cssnano, split critical CSS and code-split per route. practical CSS size reduction. only minifying while shipping dead rules and deeply nested Sass.
Build a scalable Sass theming system
Store themes as maps, emit values as CSS custom properties so runtime switching needs no recompile, generate per-theme scopes via mixins. scalable theme architecture in Sass. duplicating whole stylesheets per theme.
What does autoprefixer do and why?
Autoprefixer is a PostCSS plugin that adds vendor prefixes to CSS based on a browserslist target using compatibility data, so you write standard CSS and it handles support. cross-browser CSS tooling.
Build a DRY button with Sass maps and mixins
A base mixin for shared button styles, a variants map of name to colors looped to generate modifiers, and a sizes map looped for sizing. applying Sass abstractions to real components.
What is PostCSS and how it differs from Sass
PostCSS is a plugin-driven tool that parses CSS into an AST and transforms it; it is not a fixed language like Sass but a platform for plugins like autoprefixer. understanding CSS tooling architecture.
Sass @mixin versus @extend
@mixin copies declarations into each caller, accepts arguments, and can duplicate code; @extend groups selectors sharing one rule via a comma list, reducing duplication but coupling selectors. how Sass features shape output.
What is nesting in Sass and its pitfall?
Nesting writes child rules inside parents mirroring structure, but deep nesting generates long descendant selectors with high specificity. ergonomic Sass authoring and its risks.
Sass variable versus CSS custom property
Sass $vars resolve at build time and vanish from output; CSS --vars live in the browser, cascade, inherit, and update at runtime. Use Sass for static config, custom properties for theming. compile-time versus runtime values.
What is a CSS pre-processor?
A pre-processor adds variables, nesting, mixins, functions, and partials, compiling its own syntax into plain CSS for the browser. basics of authoring tooling.
Using :is() and :where() to manage specificity
:is() groups selectors and takes its most specific argument's specificity, :where() does the same grouping but contributes zero specificity, ideal for easily overridable defaults. modern selector specificity control.
Utility-first versus semantic CSS trade-offs
Utility-first gives speed, small purged bundles, and no naming overhead but verbose markup; semantic BEM gives readable markup and clear boundaries but naming and dead-CSS risk. balanced CSS architecture judgment.
Should a component own its outer spacing?
Components own internal padding but should not own external margin; the parent or layout owns spacing between siblings, keeping components context-independent. spacing ownership in design systems.
Explain the inverted triangle of ITCSS
ITCSS orders layers from far-reaching low-specificity (settings, tools, generic) down to localized high-specificity (components, utilities), so specificity climbs gradually. managing the cascade at scale.
How custom properties enable dynamic theming
Custom properties cascade and resolve live, so redefining them on a scope or data attribute reskins everything via var(). runtime theming with CSS variables.
What are the two principles of OOCSS?
Separate structure from skin, and separate container from content; this lets visual themes and layout be mixed and reused independently. reusable CSS architecture thinking.
Explain the BEM naming convention
Block is a standalone component, Element is a child tied by double underscore, Modifier is a variant by double dash, keeping specificity flat. scalable CSS class naming.
What are CSS variable fonts?
One file encodes a continuous range along axes, cutting requests and bytes, controlled via font-weight, font-style, and font-variation-settings. modern web typography and performance.
What is a CSS containing block?
Containing block is the reference rectangle; static and relative use the nearest block ancestor's content box, absolute uses nearest positioned ancestor, fixed uses the viewport. how percentages and offsets are resolved in layout.
Get CSS bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.