All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8668 bites
Page 56
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.
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.
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.
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.
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().
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.
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.
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.
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.
Pseudo-class versus pseudo-element in CSS
Pseudo-classes target an element in a state, pseudo-elements style a generated or sub-part using double colons, and ::before injects decorative content.
Categories of Design Tokens
Design tokens fall into tiers: primitive tokens hold raw values, semantic tokens assign meaning by aliasing primitives, and component tokens scope decisions to specific UI parts.
Design Token Naming Conventions
Design token names encode meaning through a consistent, layered structure so values stay portable across themes and platforms. A clear convention like category-type-item-state turns scattered constants into a self-documenting, predictable system that…
Design a personalized ad copy pipeline
Identify sources, choose batch versus streaming, generate and deliver copy via APIs.
Architect a developer-portal personalization engine
A user profile of role and level, content tagged with the same taxonomy, a matching/ranking layer, and a rendering pipeline ordering tutorials.
Multi-armed bandit vs A/B testing for headlines
Bandits shift traffic toward winners using updated per-arm reward state; A/B holds fixed splits until a fixed-horizon decision.
Track scroll depth: Intersection Observer vs scroll events
Place sentinels at depth thresholds and fire once via Intersection Observer, off the main thread; scroll listeners fire constantly and need throttling.
Measure active engagement time accurately
Accumulate time only while the tab is visible and the user active, via Page Visibility and activity events; flush with sendBeacon on unload.
Manage localized copy across many A/B tests
A keyed versioned string store, a translation workflow with per-locale status, and pooling or hierarchical analysis for small languages.
Build a simple A/B test for a headline
Assign each visitor a sticky bucket, serve the matching headline variant, log impressions and conversions per variant.
Automatically moderate user-generated ad copy
A layered pipeline of fast keyword/regex filters plus an ML text classifier, with human review for borderline cases.