Easy everything in CSS & Design Systems
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.
Documenting a single UI component
Purpose and when to use, a props API table, live examples of variants and states, accessibility notes, and do and don't guidance.
Packaging a design system as an npm dependency
Publish to an npm registry, with package.json holding the version, entry points, and dependencies, and version it via SemVer.
Why design systems use Sass or PostCSS
Sass adds variables, nesting, mixins, and functions for reuse; PostCSS transforms CSS via plugins like autoprefixer.
Associating a label with a form input
Explicit association via for and id, implicit by wrapping the input, and why this gives screen readers an accessible name and larger click target.
Designing a Card component API
Simple props for title and image, but children or slots for arbitrary content instead of a string prop, keeping it composable.
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.
Component versus pattern in a design system
A component is a single reusable UI building block; a pattern is a documented way of composing components to solve a recurring problem.
What are design tokens?
Platform-agnostic name-value pairs for design values, transformed into CSS variables or platform code, consumed by components by name.
Purpose of a design system for developers
A single source of truth of reusable components and tokens that ensures consistency, speeds delivery, and centralizes accessibility.
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.
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.
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.
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.
How do you trigger a CSS transition? Provide two methods.
Set transition on the element, then change a property via :hover or by toggling a class with JavaScript.
Make an image scale fluidly without exceeding its original size
Tests intrinsic sizing awareness. Good answer: max-width: 100% scales the image down with its container but never stretches it beyond intrinsic size; add height: auto to preserve aspect ratio. Red flag: width: 100% or omitting height, causing distortion.
Explain the mobile-first approach and how it differs from desktop-first
Mobile-first starts small, layers up with min-width; desktop-first starts large, overrides down with max-width.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles