CSS Styling and Responsive Design Questions

Covers Cascading Style Sheets fundamentals and practical implementation of responsive and adaptive layouts across devices. Topics include selectors, specificity, cascade, the box model, margins, padding, positioning, and common layout techniques such as Flexbox and CSS Grid. Candidates should understand media queries and breakpoint strategies, mobile first versus desktop first approaches, relative units and viewport units, and techniques for touch friendly interactions. Also includes handling component states such as hover, focus, active, and disabled; maintaining visual consistency with design specifications; writing maintainable styles with methodologies such as BEM or utility classes; using CSS preprocessors and component styling approaches including CSS in JavaScript; testing and debugging responsive layouts across screen sizes and browsers; and balancing visual fidelity with performance and accessibility. At junior levels emphasize producing clean, working layouts that adapt across typical breakpoints; at senior levels emphasize scalable architecture, advanced layout patterns, progressive enhancement, and performance optimizations.

HardTechnical

48 practiced

Implement theme switching between light and dark modes using CSS custom properties and prefers-color-scheme. Requirements: respect the user's system preference by default, allow the user to override and persist their choice in localStorage, and apply the chosen theme without a full page reload. Provide the minimal CSS and JavaScript snippets and explain accessibility considerations such as contrast and reduced-motion.

Sample Answer

**Approach (brief)** Use CSS custom properties with a prefers-color-scheme fallback. Let user override by setting data-theme on <html>, persist to localStorage, and update live by toggling that attribute. Also listen to system changes to adapt when no user override exists.

**Minimal CSS**

css

:root {
  /* base (light) */
  --bg: #ffffff;
  --text: #111111;
  --link: #0066cc;
  --motion: 1s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1020;
    --text: #e6eef8;
    --link: #4da3ff;
  }
}

/* user override */
:root[data-theme="dark"] {
  --bg: #0b1020;
  --text: #e6eef8;
  --link: #4da3ff;
}
:root[data-theme="light"] {
  --bg: #ffffff;
  --text: #111111;
  --link: #0066cc;
}

/* usage */
html, body { background: var(--bg); color: var(--text); transition: background 200ms, color 200ms; }
a { color: var(--link); }
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

**Minimal JavaScript**

javascript

// Immediately apply saved theme or fall back to system
const KEY = 'theme-preference';
const saved = localStorage.getItem(KEY);
const root = document.documentElement;
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

function applyTheme(theme) {
  if (theme) root.setAttribute('data-theme', theme);
  else root.removeAttribute('data-theme');
}

// init
applyTheme(saved);

// toggle called by button
function toggleTheme() {
  const current = root.getAttribute('data-theme') || (prefersDark.matches ? 'dark' : 'light');
  const next = current === 'dark' ? 'light' : 'dark';
  applyTheme(next);
  localStorage.setItem(KEY, next);
}

// allow "reset to system"
function resetToSystem() {
  localStorage.removeItem(KEY);
  applyTheme(null);
}

// respond to system changes when no user override
prefersDark.addEventListener('change', e => {
  if (!localStorage.getItem(KEY)) applyTheme(e.matches ? 'dark' : 'light');
});

**Accessibility considerations**- Ensure contrast meets WCAG AA/AAA for text and UI components (use tools or formulas). - Respect prefers-reduced-motion: remove animations/transitions when set. - Expose a visible control (button with aria-pressed or a menu) and keyboard focus states. - Provide a way to “follow system” (reset) so users can revert to OS preference.

This solution is minimal, client-only, works without full reload, and respects both system preferences and explicit user choice.

MediumTechnical

25 practiced

Using SCSS (Sass), write a reusable button component that supports primary and secondary variants, responsive padding, theme color variables, and a mixin for a hover shadow effect. Show variable declarations, mixin usage, and the component structure in SCSS only, and explain how to keep the output CSS maintainable.

Sample Answer

**Approach (brief)**

Use theme variables, a reusable hover-shadow mixin, responsive padding via a function or map, and a single .btn component with modifier classes for variants. This keeps markup simple and CSS output predictable.

scss

// Variables
$space-xs: 6px;
$space-sm: 10px;
$space-md: 14px;
$space-lg: 18px;

$theme-colors: (
  primary: #0d6efd,
  primary-contrast: #fff,
  secondary: #6c757d,
  secondary-contrast: #fff
);

// Mixin: hover shadow
@mixin hover-shadow($color: rgba(0,0,0,0.15), $y: 4px, $blur: 12px) {
  transition: box-shadow 180ms ease, transform 120ms ease;
  &:hover,
  &:focus {
    box-shadow: 0 $y $blur $color;
    transform: translateY(-1px);
  }
}

// Responsive padding helper (based on breakpoints)
$btn-padding: (
  xs: ($space-xs, $space-sm),
  sm: ($space-sm, $space-md),
  md: ($space-md, $space-lg)
);

@function pad($size) {
  @return nth(map-get($btn-padding, $size), 1) nth(map-get($btn-padding, $size), 2);
}

// Button component
.btn {
  display: inline-block;
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  padding: pad(md);
  color: map-get($theme-colors, primary-contrast);
  background-color: map-get($theme-colors, primary);
  @include hover-shadow();

  // Accessibility focus
  &:focus {
    outline: 3px solid rgba(13,110,253,0.16);
    outline-offset: 2px;
  }

  // Variants
  &--secondary {
    background-color: map-get($theme-colors, secondary);
    color: map-get($theme-colors, secondary-contrast);
  }

  // Size responsive overrides
  @media (max-width: 600px) {
    padding: pad(xs);
  }
  @media (min-width: 601px) and (max-width: 1024px) {
    padding: pad(sm);
  }
}

**How this keeps CSS maintainable**- Centralized variables and color map let you change theme in one place.- Mixin encapsulates hover behavior; reuse avoids duplication.- Single .btn with modifier class (.btn--secondary) follows BEM-like pattern, improving predictability.- Responsive padding map isolates breakpoint logic and avoids multiple scattered rules.- Output CSS stays small because mixins are concise and component-focused; consider using a build step with Sass partials and CSS minification for production.

MediumTechnical

31 practiced

A product detail page shows a high Cumulative Layout Shift (CLS) score. The suspected causes are images, ad slots, and dynamically injected content. Describe a step-by-step approach to identify which elements cause layout shift, and list CSS and minimal-JS fixes you would apply (for example, reserving space, aspect-ratio, lazy-loading strategy, and font loading settings).

Sample Answer

**Approach — step by step to identify culprits**1. Reproduce and measure: open Lighthouse/Chrome DevTools Performance (record) and the Layout Shift Regions overlay to see when/where shifts occur.2. Narrow by element: in DevTools Performance flamechart, inspect "Layout Shift" events and click to reveal affected nodes; note images, ad slots, or injected DOM.3. Audit network/timing: use Network panel to see slow images/fonts and Console for ad scripts injecting nodes.4. Binary isolation: temporarily disable images, ads, or dynamic scripts (via DevTools or feature flags) to confirm which category causes most CLS.5. Monitor in prod: add RUM (e.g., web-vitals) to capture CLS and element selectors causing shifts over time.

CSS and minimal-JS fixes (concrete)- Reserve image space: always include width/height or aspect-ratio so browser can allocate layout before load.

css

.product-image {
    width: 100%;
    aspect-ratio: 4 / 3; /* reserves space */
    object-fit: cover;
  }

- For legacy img without intrinsic size, set inline width/height attributes generated server-side:

html

<img src="..." width="800" height="600" alt="..." />

- Lazy-load offscreen images but avoid lazy-loading LCP image:

html

<img src="lcp.jpg" loading="eager" />
  <img src="other.jpg" loading="lazy" />

- Ad slots: reserve container size and use CSS min-height; render placeholder to prevent expansion.

css

.ad-slot { min-height: 250px; width: 300px; }

Use a stable fallback or fixed-height iframe; only replace content inside the reserved box.

- Dynamically injected content: insert elements off-document flow or reserve space before injecting.

// reserve slot then inject
  const slot = document.createElement('div');
  slot.className = 'dyn-slot';
  slot.style.minHeight = '120px';
  parent.appendChild(slot);
  // later fill slot without changing layout
  slot.innerHTML = htmlString;

- Fonts: preload critical font, use font-display: swap to avoid invisible text causing shift.

html

<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>

css

@font-face { font-family: 'Inter'; src: url('/fonts/Inter.woff2') format('woff2'); font-display: swap; }

- Webfont FOIT/FOUT mitigation: provide fallback system fonts with similar metrics or use font metrics CSS (font-size-adjust) and CSS variable fallback to reduce reflow.

- Minimal JS tactics: - Measure CLS sources client-side: use web-vitals to capture node selectors.

import { getCLS } from 'web-vitals';
    getCLS(metric => console.log(metric));

- Defer noncritical scripts and initialize ad SDKs after layout stable or user interaction.

Trade-offs and notes- Reserving space may show empty placeholders — balance UX with skeleton loaders.- For fluid content use aspect-ratio rather than fixed heights to keep responsiveness.- Preloading fonts helps LCP and CLS for text but increases priority network cost.

Quick checklist to ship:- Add width/height or aspect-ratio for images- Reserve ad slot dimensions and use iframes/placeholders- Lazy-load offscreen images; keep LCP eager- Preload critical fonts + font-display: swap- Use RUM to verify CLS reduction after changes

EasyTechnical

27 practiced

Write plain CSS (no frameworks) for a responsive, mobile-first centered container. Requirements: container should be fluid on small screens, have width:100% up to a max-width of 1200px on large screens, be horizontally centered, include 16px side padding on small screens and 32px side padding on screens >= 768px. Provide the CSS rules only.

Sample Answer

css

/* Mobile-first centered fluid container */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.container {
  width: 100%;                 /* fluid on small screens */
  max-width: 1200px;           /* cap on large screens */
  margin-left: auto;
  margin-right: auto;          /* horizontally centered */
  padding-inline: 16px;        /* 16px side padding on small screens */
  padding-top: 0;
  padding-bottom: 0;
}

/* Increase side padding on medium+ screens */
@media (min-width: 768px) {
  .container {
    padding-inline: 32px;      /* 32px side padding at >=768px */
  }
}

HardTechnical

31 practiced

Write performant CSS for a hover animation on a card so that it 'lifts' slightly and fades a shadow using only transforms and opacity where possible. Requirements: prefer compositing-friendly properties, include a will-change recommendation, and provide a fallback for older browsers. Provide CSS and a short explanation of how compositing layers reduce paint cost.

Sample Answer

**Approach (brief)** Use GPU-friendly properties (transform + opacity) so the browser can promote the element to a compositing layer and avoid layout/paint. Recommend will-change to hint the browser. Provide a simple fallback that degrades to box-shadow/top changes for older browsers.

css

/* Card base */
.card {
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1),
              box-shadow 220ms cubic-bezier(.2,.8,.2,1),
              opacity 220ms linear;
  /* Hint to create a compositing layer when hovered (remove after animation to free memory) */
  will-change: transform, opacity;
  /* Fallback for very old UA: ensure positionable if transform missing */
  position: relative;
}

/* Hover/Focus effect: lift & fade shadow using only transform + opacity */
.card:hover,
.card:focus {
  transform: translateY(-8px) translateZ(0); /* lift */
  /* reduce shadow visually by lowering box-shadow opacity — still uses composited transform */
  box-shadow: 0 12px 30px rgba(0,0,0,0.09);
  /* Optional subtle overlay or content fade using opacity */
  opacity: 0.99; /* slight change to ensure compositing in some browsers */
}

/* For older browsers that don't support transform, provide a JS-less graceful fallback:
   animate top/box-shadow — note: this triggers layout/paint and is slower. */
.no-transform .card:hover,
.no-transform .card:focus {
  top: -8px; /* requires position relative/absolute */
  box-shadow: 0 12px 30px rgba(0,0,0,0.09);
}

Explanation of compositing layers and performance - Transform and opacity are compositing-only in modern browsers: changing them updates the GPU compositing layer instead of forcing layout or paint, which is much cheaper. - will-change signals the browser to promote to a layer ahead of time, reducing jank for the first frame. Use sparingly and remove after use to avoid memory overhead. - Fallbacks using top/box-shadow/opacity will work but incur reflow/repaint, so keep them minimal for older browsers.

Unlock Full Question Bank

Get access to hundreds of CSS Styling and Responsive Design interview questions and detailed answers.

Join thousands of developers preparing for their dream job.