CSS
275 bites tagged CSS — interview questions with model answers, and 60-second explainers.
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. Localization-aware responsive CSS.
CSS custom properties versus Sass for theming
Custom properties are live and cascade for dynamic switching; Sass variables compile away. runtime versus build-time variables. claiming Sass variables can change theme at runtime without recompiling.
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. practical theming with CSS. hardcoding two full stylesheets or only relying on JS to recolor.
Adapting CSS for Forced Colors Mode
Use semantic HTML and system color keywords, the forced-colors media query, forced-color-adjust sparingly. supporting forced-colors accessibility. ignoring it, or assuming background images and box-shadows still convey state.
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. styling distribution trade-offs. declaring one universally better with no mention of runtime or caching.
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. structured variant styling.
CSS transition versus animation
Transitions interpolate between two states triggered by a change; animations use keyframes for multi-step, looping, autonomous motion. animation API fundamentals.
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. knowing each tool's dimensionality.
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(). practical token-to-CSS wiring.
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. understanding of scoping strategies.
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. fluency with Flexbox alignment axes.
Structure CSS layers for reset, vendor, and components
Declare layer order upfront, place reset earliest, vendor next, your components last so they win. applied cascade-layer architecture. relying on source order or !important instead of an explicit layer declaration.
What problem do CSS Cascade Layers solve?
Layers create explicit priority bands, layer order beats specificity inside, and you control override without selector hacks. understanding of the cascade beyond specificity.
What design tokens are and why they matter
Tokens are named, platform-agnostic design decisions stored centrally, enabling consistency, theming, and one-place updates. grasp of design tokens as a single source of truth.
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. knowledge of scalable CSS architecture.
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… understanding of selector matching cost.
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. applied container query mechanics.
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. knowledge of perceptual color spaces.
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. understanding of relational selection.
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. understanding of component-level responsiveness.
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. knowledge of native nesting syntax.
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. awareness of writing-mode-aware layout.
Declaring and scoping CSS custom properties
Declare with --name, read with var(), :root makes it global while a class scopes it locally. understanding of custom property syntax and the cascade. thinking they behave like compile-time Sass variables.
Why design systems use Sass or PostCSS
Sass adds variables, nesting, mixins, and functions for reuse; PostCSS transforms CSS via plugins like autoprefixer. Knowing what preprocessors add over plain CSS. claiming native CSS variables make them entirely obsolete.
Get CSS bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.