Advanced CSS Interview Questions

Custom properties (--brand: #2563eb;, read with var(--brand)) live in the browser: they cascade, inherit and can change at runtime. Sass variables become fixed values at build time.

<style>
  :root { --bg: #ffffff; --text: #111827; --accent: #2563eb; }
  .dark { --bg: #111827; --text: #f9fafb; --accent: #93c5fd; }
  .card { background: var(--bg); color: var(--text); border: 2px solid var(--accent);
          padding: 10px; margin-bottom: 8px; border-radius: 8px; }
  .card b { color: var(--accent); }
</style>
<div class="card">Default theme, <b>accent</b></div>
<div class="dark"><div class="card">Same rule inside .dark, <b>accent</b></div></div>

Redefine them on a parent and everything below changes, which is how themes work; JavaScript can set them with element.style.setProperty(). More in CSS variables.

Put every color in custom properties, define a dark set in @media (prefers-color-scheme: dark), and set color-scheme so scrollbars and form controls darken too. A data-theme attribute lets a manual toggle override the system setting.

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #111827;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0f172a; --text: #e5e7eb; }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #0f172a; --text: #e5e7eb; }
:root[data-theme="light"] { color-scheme: light; }

body { background: var(--bg); color: var(--text); }

Apply the saved choice from a small inline script in the head, before first paint, or the page flashes light first.

An isolated layout region: floats inside stay inside, floats outside do not overlap it, and margins inside it do not collapse with margins outside it. Floats, absolute elements, inline-block, table cells, overflow other than visible or clip, flex and grid items, and display: flow-root create one.

<style>
  .float { float: left; width: 90px; height: 90px; background: #f97316; margin-right: 10px; }
  .text { background: #dbeafe; padding: 6px; margin-bottom: 8px; }
  .bfc { display: flow-root; }
</style>
<div class="float"></div>
<div class="text">Normal block: its background runs under the float, only the text wraps.</div>
<div style="clear: both"></div>
<div class="float"></div>
<div class="text bfc">New BFC: the whole box sits beside the float.</div>

flow-root exists only to create a BFC; overflow: hidden also clips.

Reflow (layout) recalculates sizes and positions; repaint redraws pixels without changing geometry. width triggers both, color only a repaint, transform and opacity can skip both. Layout thrashing is JavaScript alternating writes and reads, which forces a layout on every read:

const items = [...document.querySelectorAll('.item')];

// Slow: every offsetHeight read forces layout after the previous write
for (const el of items) {
  el.style.height = el.offsetHeight + 10 + 'px';
}

// Fast: read everything first, then write
const heights = items.map((el) => el.offsetHeight);
items.forEach((el, i) => { el.style.height = heights[i] + 10 + 'px'; });

Layout-forcing reads include offsetWidth, getBoundingClientRect() and scrollTop.

@layer groups styles into named layers whose order you declare once. A later layer beats an earlier one regardless of specificity, so a plain class in components overrides a long selector in vendor.

@layer reset, vendor, components, utilities;

@layer vendor {
  .widget .header nav ul li a { color: gray; }  /* high specificity */
}
@layer components {
  .nav-link { color: navy; }                     /* wins: later layer */
}

Unlayered styles beat every layer, and for !important declarations the order is reversed.

Pick by team and stack; all four fight global class names that collide. BEM is a naming convention with no tooling; CSS Modules rename classes per file at build time; Tailwind replaces custom class names with long utility lists; CSS-in-JS gives dynamic styles at a runtime cost. Whatever you pick, keep design tokens in custom properties, specificity low and flat, and no styling by id.

The browser will not paint until every stylesheet in the head that matches the current media has loaded, or it would flash unstyled content. To cut the delay, inline the critical CSS for the first screen, give non-matching sheets a media attribute (media="print" does not block), remove unused CSS, and avoid @import, which chains requests.

They name sides by writing direction instead of physical direction: margin-inline-start instead of margin-left, padding-block instead of top and bottom, inset-inline-end instead of right. In right-to-left languages like Arabic or Hebrew they flip automatically, so you skip a second set of [dir="rtl"] rules.

<style>
  .note { border-inline-start: 4px solid #2563eb; padding-inline-start: 10px;
          margin-block: 8px; background: #f3f4f6; }
</style>
<p class="note" dir="ltr">Left to right: the border is on the left.</p>
<p class="note" dir="rtl">من اليمين إلى اليسار: الحد على اليمين.</p>

:focus matches whenever an element has focus, including after a mouse click (except in Safari, which by design does not focus a button on click); :focus-visible matches only when the browser decides focus should show, typically during keyboard navigation.

<style>
  button { padding: 8px 14px; margin: 4px; border: 1px solid #9ca3af; border-radius: 6px; background: white; }
  .a:focus { outline: 3px solid crimson; }
  .b:focus { outline: none; }
  .b:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
</style>
<button class="a">:focus (click me)</button>
<button class="b">:focus-visible (click, then press Tab)</button>

The anti-pattern is *:focus { outline: none; } with no replacement.

Set one dimension and the aspect-ratio property; the browser computes the other.

<style>
  .row { display: flex; gap: 10px; align-items: flex-start; }
  .video { width: 200px; aspect-ratio: 16 / 9; background: #2563eb; color: white; display: grid; place-items: center; }
  .square { width: 90px; aspect-ratio: 1; background: #f97316; color: white; display: grid; place-items: center; }
</style>
<div class="row"><div class="video">16 / 9</div><div class="square">1 / 1</div></div>

Follow-up: why did the old padding-top: 56.25% hack work? Vertical padding percentages are calculated from the containing block's width.

Less than before. CSS now has custom properties, nesting, calc(), color-mix() and cascade layers, and nesting works in Chrome 120+, Firefox 117+ and Safari 17.2+.

.card {
  padding: 1rem;
  & h2 { margin: 0; }
  &:hover { box-shadow: 0 2px 8px rgb(0 0 0 / 20%); }
  @media (min-width: 640px) { padding: 2rem; }
}

Sass still adds mixins, loops and partials. New projects can often skip it; existing Sass codebases have no urgent reason to migrate.

In DevTools, read the element's Styles pane: matching rules in cascade order, overridden ones struck through, invalid ones flagged. Then check:

1. The selector does not match (a typo, a class added later by JavaScript).
2. Another rule wins on specificity, layer or order.
3. The value is invalid, so it is dropped (colour).
4. The property does nothing here (z-index on a static element).
5. The stylesheet did not load (Network tab).