Easy interview questions in CSS & Design Systems
Explain the CSS box model: content-box vs border-box
Tests if you understand how width maps to rendered size. Good answers contrast content-box (350px + 10px border = 370px) with border-box (stays 350px) and note that four width:25% items break under content-box. Red flag: saying border-box includes margin.
What color wins when an ID and class rule conflict?
Red wins; an ID scores 1-0-0 while a class scores 0-1-0, so the ID rule beats the class rule.
How do class and ID selectors differ in specificity and use case?
IDs are 1-0-0 and meant for unique elements; classes are 0-1-0 and reusable.
Set paragraph text blue and background light grey, compare HEX, RGB, HSL
Set color and background-color; HEX is compact, RGB is explicit, HSL is intuitive for lightness/hue.
How do you declare a custom font and apply it to headings?
This tests @font-face usage for custom web fonts. A good answer declares a font-family name and src URL inside @font-face, then applies that family to heading selectors.
Explain em, rem, px and why rem is preferred for font sizing
This tests CSS unit semantics and accessibility. px is absolute; em compounds against its parent; rem is root-relative and predictable. rem respects user browser font settings without nesting issues.
CSS Grid: difference between 1fr and auto column sizing?
Tests fractional vs intrinsic sizing. 1fr divides leftover space; auto shrinks to content. Note that 1fr minimums default to auto, causing overflow with unbreakable content, unlike auto tracks. Red flag: claiming they are identical or auto always fills space.
What is the viewport meta tag and what does width=device-width, initial-scale=1.0 do?
This tests mobile viewport behavior and CSS pixels. The tag instructs browsers how to size the viewport; width=device-width sets width to screen CSS pixels; initial-scale=1.0 sets a 1:1 zoom ratio. A red flag is confusing viewport width with physical pixels.
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.
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.
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.
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 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.
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.
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 nesting in Sass and its pitfall?
Nesting writes child rules inside parents mirroring structure, but deep nesting generates long descendant selectors with high specificity.
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 are design tokens?
Platform-agnostic name-value pairs for design values, transformed into CSS variables or platform code, consumed by components by name.
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.
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.
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