获得完整访问权限

CSS Interview Questions Guide for 2026

Complete guide to CSS interview questions for your next interview. Covers core concepts, layouts, responsive design, modern features, and Tailwind CSS essentials.
标签
#css#interviews#tailwind
作者
GreatFrontEnd Team
31 分钟阅读
Dec 9, 2025
CSS Interview Questions Guide for 2026

Modern CSS interviews test your ability to solve real problems, not recite definitions. You'll debug broken layouts, explain why a sticky navbar fails on mobile Safari, choose between Flexbox and Grid for specific use cases, and demonstrate knowledge of features like Container Queries and the :has() selector.

But here's what separates strong candidates from average ones: it's not just what you know, it's how you think. Interviewers want to see your problem-solving process, your ability to articulate trade-offs, and your understanding of "why" certain approaches work better than others. A candidate who can explain when to use em vs rem and justify their choice is far more valuable than someone who's memorized every CSS property.

This post focuses on:

  • Core concepts that appear in 90% of CSS interviews
  • Decision-making frameworks for choosing between layout approaches
  • Scenario-based questions that test real-world problem-solving
  • Modern CSS features that separate junior from senior candidates
  • Tailwind CSS essentials for companies using utility-first approaches

Whether you're preparing for your first frontend role or interviewing at a senior level, this post will help you demonstrate both technical depth and clear reasoning - exactly what interviewers look for.

Core CSS concepts

Box model

The box model is the foundation of CSS layout. Every element is a rectangular box with four areas: content, padding, border, and margin.

The interview question: "Explain the CSS box model and the difference between box-sizing: content-box and box-sizing: border-box."

/* content-box (default) */
.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Total width = 200 + 40 (padding) + 10 (border) = 250px */
}


/* border-box (modern approach) */
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Total width = 200px (padding and border included) */
}

Key points:

  • content-box adds padding and border to the specified width
  • border-box includes padding and border within the specified width
  • Most modern CSS resets use box-sizing: border-box globally
  • Margin is always outside the box, regardless of box-sizing

Pro tip: Explain that border-box makes responsive layouts more predictable because percentage widths behave intuitively.

Display property

The display property controls how an element participates in layout flow.

Common interview question: "What's the difference between display: none, visibility: hidden, and opacity: 0?"

PropertySpace OccupiedAccessible to Screen ReadersEvents TriggeredUse Case
display: noneNoNoNoCompletely remove from layout
visibility: hiddenYesNoNoHide but maintain layout space
opacity: 0YesYesYesFade animations, accessible hiding

Key display values:

/* Block - takes full width, stacks vertically */
.block {
  display: block;
}


/* Inline - flows with text, respects horizontal spacing only */
.inline {
  display: inline;
}


/* Inline-block - flows with text but respects width/height */
.inline-block {
  display: inline-block;
  width: 100px;
  height: 100px;
}


/* Flex - modern one-dimensional layout */
.flex {
  display: flex;
}


/* Grid - modern two-dimensional layout */
.grid {
  display: grid;
}

CSS variables

CSS Custom Properties (variables) enable dynamic, maintainable stylesheets.

Interview question: "How do CSS variables work, and what are their advantages over preprocessor variables?"

/* Define variables in :root for global scope */
:root {
  --primary-color: #007bff;
  --spacing-unit: 8px;
  --border-radius: 4px;
}


/* Use variables with var() */
.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius);
}


/* Override in specific contexts */
.dark-theme {
  --primary-color: #66b3ff;
}


/* Fallback values */
.element {
  color: var(--text-color, #333);
}

CSS variables vs preprocessor variables:

FeatureCSS VariablesSass/Less Variables
Runtime changes✅ Yes❌ No (compile-time only)
JavaScript access✅ Yes❌ No
Cascade & inheritance✅ Yes❌ No
Browser support✅ Modern browsers✅ Compiles to CSS

JavaScript integration:

// Read CSS variable
const primary = getComputedStyle(document.documentElement).getPropertyValue(
  '--primary-color',
);


// Set CSS variable
document.documentElement.style.setProperty('--primary-color', '#ff0000');

Specificity & cascade

Specificity determines which CSS rule applies when multiple rules target the same element.

The classic question: "Explain CSS specificity. How is it calculated?"

Specificity hierarchy:

/* Specificity: 0-0-0-1 (1 element) */
p {
  color: black;
}


/* Specificity: 0-0-1-0 (1 class) */
.text {
  color: blue;
}


/* Specificity: 0-0-1-1 (1 class + 1 element) */
p.text {
  color: green;
}


/* Specificity: 0-1-0-0 (1 ID) */
#header {
  color: red;
}


/* Specificity: 1-0-0-0 (inline style) */
<p style="color: purple;">


/* Specificity: ∞ (!important overrides everything) */
p {
  color: orange !important;
}

Specificity calculation:

  • Inline styles: 1-0-0-0
  • IDs: 0-1-0-0
  • Classes, attributes, pseudo-classes: 0-0-1-0
  • Elements, pseudo-elements: 0-0-0-1

Example problem:

/* Which color wins? */
#nav .menu li {
  color: red;
} /* 0-1-1-1 = 111 */
.header .menu li {
  color: blue;
} /* 0-0-2-1 = 021 */
li.active {
  color: green;
} /* 0-0-1-1 = 011 */


/* Answer: red (highest specificity) */

Positioning

The position property controls how elements are positioned in the document flow.

Interview question: "Explain the different position values and when to use each."

/* Static (default) - normal document flow */
.static {
  position: static;
}


/* Relative - offset from normal position, space preserved */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}


/* Absolute - positioned relative to nearest positioned ancestor */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}


/* Fixed - positioned relative to viewport */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}


/* Sticky - hybrid of relative and fixed */
.sticky {
  position: sticky;
  top: 0;
}

Common use cases:

PositionUse CaseExample
staticDefault flowRegular content
relativeMinor adjustments, positioning contextOffset badges, anchor for absolute children
absoluteOverlays, tooltipsDropdown menus, modals
fixedPersistent UINavigation bars, chat widgets
stickyScroll-aware headersTable headers, section titles

Critical concept - positioning context:

/* Absolute positioning requires a positioned parent */
.parent {
  position: relative; /* Creates positioning context */
}


.child {
  position: absolute;
  top: 0; /* Relative to .parent, not viewport */
  left: 0;
}

Stacking context

Stacking context determines the 3D layering of elements along the z-axis.

Advanced interview question: "What creates a stacking context, and how does z-index work?"

What creates a stacking context:

/* 1. Root element (html) */


/* 2. Positioned elements with z-index */
.positioned {
  position: relative;
  z-index: 10;
}


/* 3. Flex/Grid items with z-index */
.flex-item {
  z-index: 5;
}


/* 4. Elements with opacity < 1 */
.transparent {
  opacity: 0.9;
}


/* 5. Transform, filter, perspective */
.transformed {
  transform: translateZ(0);
}


/* 6. will-change */
.optimized {
  will-change: transform;
}

Z-index rules:

/* z-index only works on positioned elements */
.static {
  z-index: 999; /* ❌ No effect (position: static) */
}


.relative {
  position: relative;
  z-index: 999; /* ✅ Works */
}


/* z-index is scoped to stacking context */
.parent {
  position: relative;
  z-index: 1;
}


.child {
  position: relative;
  z-index: 9999; /* Still behind elements with z-index: 2 in different context */
}

What to explain:

  • z-index only works on positioned elements (except flex/grid children)
  • Each stacking context is independent
  • Children can't escape their parent's stacking context
  • Common stacking context creators: opacity, transform, filter, position + z-index

Pseudo-classes & pseudo-elements

Pseudo-classes select elements based on state, while pseudo-elements style specific parts of elements.

Interview question: "What's the difference between pseudo-classes and pseudo-elements?"

Pseudo-classes:

/* User interaction */
a:hover {
  color: blue;
}
input:focus {
  border-color: blue;
}
button:active {
  transform: scale(0.98);
}


/* Form states */
input:disabled {
  opacity: 0.5;
}
input:checked + label {
  font-weight: bold;
}
input:valid {
  border-color: green;
}
input:invalid {
  border-color: red;
}


/* Structural */
li:first-child {
  margin-top: 0;
}
li:last-child {
  margin-bottom: 0;
}
li:nth-child(odd) {
  background: #f0f0f0;
}
li:nth-child(3n) {
  /* Every 3rd item */
}

Pseudo-elements:

/* Generated content */
.icon::before {
  content: '→';
  margin-right: 8px;
}


.external-link::after {
  content: ' ↗';
}


/* Text styling */
p::first-line {
  font-weight: bold;
}


p::first-letter {
  font-size: 2em;
  float: left;
}


/* Selection styling */
::selection {
  background: yellow;
  color: black;
}

Key differences:

Pseudo-classesPseudo-elements
Select elements in a specific stateStyle specific parts of elements
Single colon : (or ::)Double colon ::
:hover, :focus, :nth-child()::before, ::after, ::first-line

Units (em, rem, %, viewport)

CSS units determine how sizes are calculated. Choosing the right unit is crucial for responsive design.

Interview question: "Explain the difference between px, em, rem, %, and viewport units. When should you use each?"

/* Absolute - fixed size */
.pixel {
  font-size: 16px; /* Always 16 pixels */
}


/* Relative to parent font-size */
.em-unit {
  font-size: 1.5em; /* 1.5 × parent font-size */
  padding: 1em; /* 1 × this element's font-size */
}


/* Relative to root font-size */
.rem-unit {
  font-size: 1.5rem; /* 1.5 × root font-size (usually 16px) */
  padding: 1rem; /* Always consistent */
}


/* Relative to parent dimensions */
.percentage {
  width: 50%; /* 50% of parent width */
}


/* Relative to viewport */
.viewport {
  width: 100vw; /* 100% of viewport width */
  height: 100vh; /* 100% of viewport height */
}

Em vs rem - the compounding problem:

/* Em compounds */
.parent {
  font-size: 16px;
}


.child {
  font-size: 1.5em; /* 16 × 1.5 = 24px */
}


.grandchild {
  font-size: 1.5em; /* 24 × 1.5 = 36px (compounds!) */
}


/* Rem doesn't compound */
.parent {
  font-size: 1.5rem; /* 24px */
}


.child {
  font-size: 1.5rem; /* Still 24px (relative to root) */
}

When to use each unit:

UnitBest ForExample
pxBorders, shadows, precise controlborder: 1px solid
emSpacing relative to font-sizepadding: 0.5em 1em
remFont sizes, consistent spacingfont-size: 1.125rem
%Responsive widths, fluid layoutswidth: 50%
vw/vhFull-screen sections, responsive typographyheight: 100vh

Layout fundamentals

Flexbox essentials

Flexbox is a one-dimensional layout system for distributing space along a single axis.

Core interview question: "Explain Flexbox and its main properties."

Flex container properties:

.container {
  display: flex;


  /* Main axis direction */
  flex-direction: row; /* row | row-reverse | column | column-reverse */


  /* Wrapping */
  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */


  /* Main axis alignment */
  justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around | space-evenly */


  /* Cross axis alignment */
  align-items: center; /* flex-start | flex-end | center | baseline | stretch */


  /* Gap between items */
  gap: 16px;
}

Flex item properties:

.item {
  /* Growth factor */
  flex-grow: 1; /* Default: 0 */


  /* Shrink factor */
  flex-shrink: 1; /* Default: 1 */


  /* Base size */
  flex-basis: 200px; /* Default: auto */


  /* Shorthand: grow shrink basis */
  flex: 1 1 200px;
  flex: 1; /* Same as: 1 1 0 */


  /* Individual alignment */
  align-self: flex-end;
}

Common patterns:

/* Equal-width columns */
.column {
  flex: 1;
}


/* Center content */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Space between header and footer */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


.content {
  flex: 1; /* Takes remaining space */
}

Grid basics

CSS Grid is a two-dimensional layout system for rows and columns.

Interview question: "When would you use Grid over Flexbox?"

Grid container properties:

.grid {
  display: grid;


  /* Define columns */
  grid-template-columns: 200px 1fr 1fr; /* Fixed + flexible */
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */


  /* Define rows */
  grid-template-rows: 100px auto 100px;


  /* Gap */
  gap: 20px;


  /* Alignment */
  justify-items: center; /* Align items horizontally */
  align-items: center; /* Align items vertically */
}

Grid item properties:

.item {
  /* Column placement */
  grid-column: 1 / 3; /* Start at line 1, end at line 3 */
  grid-column: span 2; /* Span 2 columns */


  /* Row placement */
  grid-row: 1 / 3;
  grid-row: span 2;
}

Named grid areas:

.layout {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar content content'
    'footer footer footer';
  grid-template-columns: 200px 1fr 1fr;
}


.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

Flexbox vs Grid decision tree

Interview question: "How do you decide between Flexbox and Grid?"

Use Flexbox for:

  • One-dimensional layouts (row OR column)
  • Navigation menus
  • Centering content
  • Content-driven layouts (size based on content)

Use Grid for:

  • Two-dimensional layouts (rows AND columns)
  • Page layouts (header, sidebar, content, footer)
  • Card grids
  • Layout-driven designs (size based on container)

They work together:

/* Grid for page layout */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
}


/* Flexbox for navigation inside header */
.header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* Grid for card layout */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}


/* Flexbox inside each card */
.card {
  display: flex;
  flex-direction: column;
}


.card-content {
  flex: 1;
}

The centering question

The classic interview question: "How do you center a div?"

Modern solutions:

/* 1. Flexbox (most common) */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* 2. Grid */
.grid-center {
  display: grid;
  place-items: center; /* Shorthand for align-items + justify-items */
}


/* 3. Absolute positioning */
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* 4. Margin auto (horizontal only) */
.margin-center {
  width: 300px;
  margin: 0 auto;
}

When to use each:

MethodUse CaseProsCons
FlexboxMost situationsSimple, flexibleRequires parent styling
GridGrid layoutsVery conciseOverkill for simple cases
Absolute + TransformOverlays, modalsWorks without knowing sizeRemoves from flow
Margin autoBlock elementsSimple for horizontalVertical requires height

Responsive & transforms

Media queries essentials

Media queries enable responsive designs that adapt to different screen sizes and device capabilities.

Interview question: "Explain mobile-first vs desktop-first approaches to responsive design."

Mobile-first approach (recommended):

/* Base styles for mobile */
.container {
  padding: 1rem;
  font-size: 14px;
}


/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    font-size: 16px;
  }
}


/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

Beyond width - other media features:

/* Orientation */
@media (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* Hover capability (desktop vs touch) */
@media (hover: hover) {
  .button:hover {
    background: blue;
  }
}


@media (hover: none) {
  .button:active {
    background: blue;
  }
}


/* Prefers color scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
  }
}


/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

What interviewers want to hear:

  • Mobile-first is preferred because it's easier to progressively enhance
  • Always consider accessibility features like prefers-reduced-motion
  • Container queries are the future for component-based responsive design

Transforms & transitions

Transforms change an element's appearance without affecting document flow. Transitions animate property changes.

Interview question: "Explain the difference between transforms and transitions. How do they affect performance?"

Transforms:

/* 2D Transforms */
.transform-2d {
  transform: translate(50px, 100px);
  transform: rotate(45deg);
  transform: scale(1.5);
  transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}


/* 3D Transforms */
.transform-3d {
  transform: translateZ(100px);
  transform: rotateY(45deg);
  transform: perspective(1000px) rotateY(45deg);
}

Transitions:

/* Basic transition */
.button {
  background: blue;
  transition: background 0.3s ease;
}


.button:hover {
  background: darkblue;
}


/* Multiple properties */
.card {
  transform: scale(1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);


  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Performance considerations:

/* ✅ GPU-accelerated (performant) */
.performant {
  transform: translateX(100px);
  opacity: 0.5;
}


/* ❌ Triggers layout/paint (slow) */
.slow {
  left: 100px; /* Use transform instead */
  width: 200px; /* Triggers reflow */
}

What to emphasize:

  • Only transform and opacity are GPU-accelerated
  • Avoid animating width, height, top, left - use transform instead
  • will-change hints to browser but use sparingly (memory cost)

Responsive images

Responsive images adapt to different screen sizes and resolutions for optimal performance.

CSS approaches:

/* Basic responsive image */
img {
  max-width: 100%;
  height: auto;
}


/* Object-fit for aspect ratio control */
.image-container {
  width: 300px;
  height: 200px;
}


.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* cover | contain | fill */
  object-position: center;
}

HTML approaches:

<!-- srcset for different resolutions -->
<img
  src="image.jpg"
  srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x"
  alt="Description" />


<!-- picture element for art direction -->
<picture>
  <source media="(min-width: 1024px)" srcset="desktop.jpg" />
  <source media="(min-width: 768px)" srcset="tablet.jpg" />
  <img src="mobile.jpg" alt="Description" />
</picture>


<!-- Modern formats with fallback -->
<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" />
</picture>

Aspect ratio (modern CSS):

/* New way - aspect-ratio property */
.aspect-ratio-new {
  aspect-ratio: 16 / 9;
}


.aspect-ratio-new img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Modern CSS features

CSS functions (clamp, min, max)

Modern CSS functions enable responsive values without media queries.

Interview question: "Explain how clamp(), min(), and max() work and when to use them."

/* min() - picks the smallest value */
.element {
  width: min(100%, 600px); /* Never wider than 600px */
}


/* max() - picks the largest value */
.element {
  width: max(50%, 300px); /* At least 300px wide */
}


/* clamp() - value between min and max */
.element {
  /* clamp(minimum, preferred, maximum) */
  font-size: clamp(1rem, 2.5vw, 2rem);
  /* Font size is 2.5vw, but never smaller than 1rem or larger than 2rem */
}

Practical examples:

/* Responsive typography without media queries */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}


/* Responsive container width */
.content {
  width: min(90%, 1200px);
  margin: 0 auto;
}


/* Responsive spacing */
.container {
  padding: clamp(1rem, 5vw, 3rem);
}

Container queries

Container queries allow components to respond to their container size, not the viewport.

Interview question: "What are container queries and how do they differ from media queries?"

/* Define a container */
.card-container {
  container-type: inline-size;
  container-name: card;
}


/* Query the container */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}


@container card (min-width: 600px) {
  .card {
    grid-template-columns: 250px 1fr;
    font-size: 1.125rem;
  }
}

Why container queries matter:

  • Components are truly reusable across different contexts
  • No need to know where a component will be placed
  • Better for component libraries and design systems
  • The future of responsive component design

:has() parent selector

The :has() pseudo-class selects parent elements based on their children.

Interview question: "What is the :has() selector and what problems does it solve?"

/* Select parent that contains specific child */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}


/* Select parent based on child state */
form:has(input:invalid) {
  border: 2px solid red;
}


/* Style parent when checkbox is checked */
.option:has(input:checked) {
  background: blue;
  color: white;
}

Form validation styling:

/* Show error when input is invalid and touched */
.form-field:has(input:invalid:not(:placeholder-shown)) .error {
  display: block;
}


/* Style label when input is focused */
.form-field:has(input:focus) label {
  color: blue;
  transform: translateY(-1.5rem) scale(0.9);
}

What makes :has() revolutionary:

  • First true "parent selector" in CSS
  • Eliminates need for JavaScript in many cases
  • Enables conditional styling based on content

:is() and :where()

These pseudo-classes simplify complex selectors and reduce specificity issues.

Interview question: "What's the difference between :is() and :where()?"

/* Without :is() - repetitive */
.header a:hover,
.footer a:hover,
.sidebar a:hover {
  color: blue;
}


/* With :is() - concise */
:is(.header, .footer, .sidebar) a:hover {
  color: blue;
}


/* :where() - zero specificity */
:where(.button) {
  background: gray;
}


.button.primary {
  background: blue; /* Easily overrides */
}

Key difference:

  • :is() has specificity of its most specific argument
  • :where() always has zero specificity

Logical properties

Logical properties adapt to writing direction (LTR/RTL) automatically.

Interview question: "What are CSS logical properties and why are they important?"

/* Physical properties (direction-dependent) */
.physical {
  margin-left: 1rem;
  margin-right: 2rem;
}


/* Logical properties (direction-independent) */
.logical {
  margin-inline-start: 1rem; /* left in LTR, right in RTL */
  margin-inline-end: 2rem; /* right in LTR, left in RTL */
}

Logical property mapping:

PhysicalLogical
margin-leftmargin-inline-start
margin-rightmargin-inline-end
margin-topmargin-block-start
margin-bottommargin-block-end
widthinline-size
heightblock-size

Why logical properties matter:

  • Internationalization (i18n) support built-in
  • No need for separate RTL stylesheets
  • Future-proof for vertical writing modes

Cascade layers

Cascade layers provide explicit control over CSS specificity and cascade order.

Interview question: "What are cascade layers and how do they help manage CSS at scale?"

/* Define layer order (lowest to highest priority) */
@layer reset, base, components, utilities;


/* Add styles to layers */
@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}


@layer components {
  .button {
    padding: 0.5rem 1rem;
    background: blue;
  }
}

Layer priority:

/* Later layers win, regardless of specificity */
@layer base {
  #id.class {
    color: red; /* High specificity, but in earlier layer */
  }
}


@layer components {
  .simple {
    color: blue; /* Wins! Even with lower specificity */
  }
}

Why layers matter:

  • Explicit control over cascade without !important
  • Better than specificity hacks
  • Perfect for design systems and component libraries

aspect-ratio

The aspect-ratio property maintains an element's width-to-height ratio.

/* Modern way */
.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}


/* Square */
.avatar {
  aspect-ratio: 1;
  width: 100px; /* Height will be 100px */
}

Practical examples:

/* Responsive image grid */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}


.image-grid img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
}

Tailwind CSS

Why utility-first CSS comes up in interviews

Interviewers aren't testing if you've memorized Tailwind classes. They want to understand:

  1. Your reasoning - Can you explain why utility-first might be better (or worse) for a project?
  2. Trade-offs - Do you understand the pros and cons?
  3. When to use it - Can you identify appropriate use cases?

Utility-first pros:

  • ✅ Faster development (no context switching)
  • ✅ Consistent design system
  • ✅ No CSS bloat (unused styles purged)
  • ✅ No naming fatigue

Utility-first cons:

  • ❌ HTML can look cluttered
  • ❌ Learning curve for class names
  • ❌ Harder to read for non-Tailwind developers
  • ❌ Tight coupling of styles to markup

How to articulate your understanding:

The key is showing you understand the trade-offs, not claiming one approach is universally better. For example:

It depends on the project context. Tailwind excels when you need rapid prototyping and design consistency across a component-based application. The utility-first approach reduces context switching and eliminates naming decisions. However, it does couple styles to markup, which some teams find harder to maintain. For content-heavy sites with diverse layouts, or teams new to utility-first CSS, traditional approaches might be more appropriate. I'd evaluate based on team experience, project requirements, and long-term maintainability needs.

This shows you can think critically about tools rather than following trends blindly.

Common layout patterns in Tailwind

Flexbox patterns:

<!-- Center content -->
<div class="flex min-h-screen items-center justify-center">
  <div>Centered content</div>
</div>


<!-- Space between -->
<nav class="flex items-center justify-between p-4">
  <div>Logo</div>
  <div>Menu</div>
</nav>


<!-- Responsive direction -->
<div class="flex flex-col gap-4 md:flex-row">
  <div>Stacks on mobile, row on desktop</div>
</div>

Grid patterns:

<!-- Auto-fit grid -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>


<!-- Sidebar layout -->
<div class="grid grid-cols-[250px_1fr] gap-4">
  <aside>Sidebar</aside>
  <main>Content</main>
</div>

Spacing utilities:

<!-- Padding and margin -->
<div class="mx-auto p-4">Content</div>
<div class="px-4 py-2">Horizontal and vertical padding</div>


<!-- Space between children -->
<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

@apply

When it's helpful:

/* Extracting repeated patterns */
.btn {
  @apply rounded px-4 py-2 font-medium transition-colors;
}


.btn-primary {
  @apply btn bg-blue-500 text-white hover:bg-blue-600;
}

When it becomes an anti-pattern:

/* ❌ Defeats the purpose of utility-first */
.card {
  @apply space-y-4 rounded-lg bg-white p-6 shadow-md;
}


/* You've just recreated traditional CSS! */

Better alternative - component abstraction:

// React component (better than @apply)
function Button({ variant = 'primary', children }) {
  const baseClasses = 'px-4 py-2 rounded font-medium transition-colors';
  const variantClasses = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
  };


  return (
    <button className={clsx(baseClasses, variantClasses[variant])}>
      {children}
    </button>
  );
}

JIT and arbitrary values

Just-In-Time (JIT) compilation:

JIT generates styles on-demand as you write them, enabling:

  • Arbitrary values
  • All variants enabled by default
  • Faster build times

Arbitrary values:

<!-- Custom spacing -->
<div class="mt-[137px]">Custom margin</div>


<!-- Custom colors -->
<div class="bg-[#1da1f2]">Twitter blue</div>


<!-- Custom sizes -->
<div class="w-[347px]">Exact width</div>


<!-- With CSS variables -->
<div class="bg-[var(--brand-color)]">Variable color</div>

How you should think about it:

Arbitrary values are escape hatches for one-off designs. Use them when you need a specific value that doesn't fit the design system, but don't abuse them - if you're using the same arbitrary value repeatedly, it should be in your config.

Responsive prefixes (md:, lg:)

Very common interview question: "How does responsive design work in Tailwind?"

Breakpoint system:

<!-- Mobile-first approach -->
<div class="text-sm md:text-base lg:text-lg xl:text-xl">
  Responsive text size
</div>


<!-- Default breakpoints:
  sm: 640px
  md: 768px
  lg: 1024px
  xl: 1280px
  2xl: 1536px
-->

Common responsive patterns:

<!-- Responsive grid -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <div>Card</div>
</div>


<!-- Hide/show at breakpoints -->
<div class="hidden md:block">Only visible on tablet and up</div>


<div class="block md:hidden">Only visible on mobile</div>


<!-- Responsive spacing -->
<div class="p-4 md:p-6 lg:p-8">More padding on larger screens</div>

What to emphasize:

Tailwind uses a mobile-first approach. Classes without prefixes apply to all screen sizes, and prefixed classes apply from that breakpoint up. This matches modern CSS best practices and makes responsive design intuitive.

Scenario-based questions

This section is where most candidates struggle - and where you can truly stand out. Interviewers use scenarios to assess problem-solving, not just knowledge recall.

Scenario 1: The navbar that won't stick

Question: "You have a sticky navbar that works on desktop but doesn't stick on mobile Safari. What could be the issue?"

Common issues:

/* ❌ Problem 1: Parent has overflow hidden */
.parent {
  overflow: hidden; /* Sticky won't work! */
}


/* ✅ Solution: Remove overflow or use overflow: clip */
.parent {
  overflow: clip; /* Allows sticky to work */
}


/* ❌ Problem 2: Mobile Safari viewport units */
.navbar {
  position: sticky;
  top: 0;
  height: 10vh; /* Safari's vh includes address bar */
}


/* ✅ Solution: Use dvh (dynamic viewport height) */
.navbar {
  position: sticky;
  top: 0;
  height: 10dvh; /* Accounts for mobile browser UI */
}

Example answer:

I'd first check if the parent container has overflow: hidden, which breaks sticky positioning. Then I'd verify the sticky element has room to scroll. For mobile Safari specifically, I'd check if we're using vh units - Safari's viewport height includes the address bar, so I'd switch to dvh (dynamic viewport height) or fixed pixel values.

Scenario 2: The disappearing z-index

Question: "You set z-index: 9999 on a modal, but it still appears behind other elements. Why?"

/* ❌ Modal has high z-index but is trapped */
.sidebar {
  position: relative;
  z-index: 1;
  transform: translateX(0); /* Creates stacking context! */
}


.modal {
  position: fixed;
  z-index: 9999; /* Doesn't matter - stuck in sidebar's context */
}


/* ✅ Solution: Move modal outside stacking context */
/* Render modal at root level in HTML */


/* ✅ Or remove stacking context creator */
.sidebar {
  position: relative;
  z-index: 1;
  /* Remove transform */
}

Example answer:

The issue is likely a stacking context. Even with z-index: 9999, the modal is isolated within a parent's stacking context. Common culprits are transform, opacity < 1, filter, or will-change. I'd inspect the DOM tree to find which parent creates the stacking context, then either move the modal to the root level or remove the stacking context creator.

Scenario 3: The flexbox that won't shrink

Question: "You have a flex container with text that overflows instead of wrapping. How do you fix it?"

/* ❌ Problem: Flex items won't shrink below content size */
.item {
  flex: 1;
  /* min-width defaults to 'auto' (content size) */
}


/* ✅ Solution: Override min-width */
.item {
  flex: 1;
  min-width: 0; /* Allow shrinking below content size */
}


.item p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Example answer:

Flex items have min-width: auto by default, which prevents them from shrinking below their content size. I'd set min-width: 0 on the flex item to allow it to shrink. Then I'd handle the text overflow with either text-overflow: ellipsis for truncation or word-break for wrapping.

Scenario 4: The grid that breaks on mobile

Question: "Your CSS Grid layout looks perfect on desktop but breaks on mobile with horizontal scrolling. What's wrong?"

/* ❌ Problem: Fixed column widths */
.grid {
  display: grid;
  grid-template-columns: 300px 300px 300px; /* Overflows on mobile */
}


/* ✅ Solution: Responsive columns with minmax */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}


/* ✅ Or breakpoint-based columns */
.grid {
  grid-template-columns: 1fr; /* Mobile: single column */
}


@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
  }
}

Scenario 5: The performance problem

Question: "Your animation is janky and causing performance issues. How do you optimize it?"

/* ❌ Problem: Animating layout properties */
.slow-animation {
  transition:
    width 0.3s,
    left 0.3s;
}


.slow-animation:hover {
  width: 300px; /* Triggers layout */
  left: 100px; /* Triggers layout */
}


/* ✅ Solution: Use transform and opacity only */
.fast-animation {
  transition:
    transform 0.3s,
    opacity 0.3s;
  will-change: transform;
}


.fast-animation:hover {
  transform: translateX(100px) scale(1.2); /* GPU-accelerated */
  opacity: 0.8; /* GPU-accelerated */
}

Performance checklist:

  • ✅ Only animate transform and opacity
  • ✅ Use will-change sparingly (memory cost)
  • ✅ Avoid animating width, height, top, left
  • ✅ Use CSS containment for isolated animations

Scenario 6: The centering challenge

Question: "You need to center a modal both horizontally and vertically, but it should scroll if content exceeds viewport height. How?"

/* ❌ Problem: Fixed positioning breaks scrolling */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.modal {
  max-height: 90vh;
  /* If content exceeds 90vh, it's cut off! */
}


/* ✅ Solution: Allow scrolling with proper overflow */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto; /* Allow scrolling */
}


.modal {
  max-width: 600px;
  width: 100%;
  margin: auto; /* Centers when scrolling */
}

Scenario 7: The dark mode dilemma

Question: "Implement dark mode that respects user preferences but allows manual override."

/* ✅ System preference detection */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}


@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
  }
}


/* ✅ Manual override with data attribute */
[data-theme='light'] {
  --bg-color: #ffffff;
  --text-color: #000000;
}


[data-theme='dark'] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}


/* Usage */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
// JavaScript for manual toggle
const theme = localStorage.getItem('theme') || 'auto';


if (theme === 'auto') {
  document.documentElement.removeAttribute('data-theme');
} else {
  document.documentElement.setAttribute('data-theme', theme);
}

Interview pro tips

DevTools techniques

When you're asked to debug CSS during a live coding interview, your DevTools skills reveal your experience level.

Essential DevTools skills:

  1. Inspect Element - Right-click → Inspect (Cmd/Ctrl + Shift + C)
  2. Computed Styles - Check which styles actually apply
  3. Box Model Visualization - Hover to see margins/padding
  4. Grid/Flex overlays - Click grid/flex badge to visualize
  5. Performance tab - Record interactions, identify layout thrashing

Other techniques:

  • Force element state (right-click → Force state → :hover, :focus)
  • Edit styles live (up/down arrows to increment values)
  • Copy computed styles
  • Screenshot elements (Cmd/Ctrl + Shift + P → "Capture node screenshot")
  • Check accessibility (Elements tab → Accessibility pane)

How to think aloud

Interviewers want to understand your thought process. Silent coding makes them nervous.

The framework:

  1. Restate the problem - "So we need to center this modal and ensure it's scrollable..."
  2. Identify constraints - "The modal needs to work on all screen sizes..."
  3. Consider approaches - "I could use Flexbox or Grid for centering..."
  4. Explain trade-offs - "Flexbox gives more control over overflow..."
  5. Implement and verify - "Let me try this approach... I'll test by resizing..."
  6. Reflect on the solution - "This works, but I'd also add focus trapping..."

Common interview mistakes to avoid

1. Over-engineering

Start simple, iterate. Don't build a complex solution when a simple one works.

2. Ignoring accessibility

<!-- ❌ Not accessible -->
<div onclick="handleClick()">Click me</div>


<!-- ✅ Accessible -->
<button type="button" onclick="handleClick()">Click me</button>

3. Not testing edge cases

Always test:

  • ✅ Very long text (does it overflow?)
  • ✅ Very short text (does layout break?)
  • ✅ No content (does it collapse?)
  • ✅ Mobile viewport (does it scroll?)
  • ✅ Keyboard navigation (can you tab through?)

4. Forgetting browser compatibility

I'm using CSS Grid here, which has excellent browser support in modern browsers. If we needed to support IE11, I'd use Flexbox instead.

5. Not asking clarifying questions

Good questions to ask:

  • "What browsers do we need to support?"
  • "Should this work on mobile?"
  • "Are there any accessibility requirements?"
  • "Is there a design system I should follow?"

Conclusion

Today's interviewers want to see how you think, how you solve problems, and whether you understand the "why" behind CSS patterns - not just the "what".

The candidates who succeed aren't necessarily those who've memorized every CSS property. They're the ones who can:

  • Explain their reasoning clearly and confidently
  • Debug systematically using DevTools and logical thinking
  • Make trade-offs between different approaches based on requirements
  • Write maintainable code that others can understand and extend
  • Consider accessibility and performance from the start

Modern CSS knowledge - Container Queries, :has(), clamp(), logical properties - signals that you're staying current with the platform. But clarity in reasoning is what gets you hired.

Your next steps:

  1. Practice real scenarios instead of memorizing Q&A. Build actual components, debug real issues, and explain your decisions out loud.

  2. Master DevTools. Spend time exploring the Layout panel, Performance tab, and Accessibility inspector. These tools are your best friends in interviews.

  3. Build a mental framework for approaching CSS problems:

    • What's the layout pattern? (Flexbox, Grid, or positioning?)
    • What are the responsive requirements?
    • What are the accessibility considerations?
    • What are the performance implications?

  4. Stay curious. CSS is evolving rapidly. Follow blogs, experiment with new features, and understand browser compatibility.

  5. Get hands-on practice. Head over to GreatFrontEnd's CSS questions to practice build real components and practice for next interview.

Remember: companies aren't just hiring CSS experts - they're hiring problem solvers who can communicate clearly, work collaboratively, and build accessible, performant user interfaces.

上一页

相关文章

Top 5 CSS Mistakes made by Front End Engineers
Top 5 CSS Mistakes made by Front End Engineers
Mar 5, 2024
标签
#css
5 most common CSS mistakes Front End Engineers make and how to avoid them.
CSS at Scale
CSS at Scale
Dec 22, 2023
标签
#scalability
How thousands of engineers at big tech companies write CSS.