Technical Q1: “How does CSS specificity work?”

Specificity decides which CSS rule wins when multiple rules target the same element. From lowest to highest: element (type) selectors, class/attribute/pseudo-class selectors, and ID selectors. Inline styles beat all; !important overrides specificity (use sparingly).

Small example:

<button id="buy" class="cta primary">Buy</button>

<style>
button { color: black; }    /* type: low */
.cta.primary { color: blue; }   /* classes: medium */
#buy { color: green; }      /* id: high */
</style>

Result: the button text is green because #buy outranks the others.

Technical Q2: “What is event delegation?”

Instead of attaching listeners to many children, you add one to a common parent and use event bubbling to detect the target.

Example:

<ul id="menu">
  <li data-page="home">Home</li>
  <li data-page="cart">Cart</li>
</ul>

<script>
document.getElementById('menu').addEventListener('click', (e) => {
  const li = e.target.closest('li'); // handle nested clicks
  if (!li) return;
  console.log('go to', li.dataset.page);
});
</script>

Benefits: fewer listeners, better performance, works with dynamic elements.
(Note: closest() needs a polyfill in very old browsers.)

Technical Q3: “How do you optimize React rendering?”

Start by measuring with React DevTools Profiler to find slow components, then apply targeted fixes:

• React.memo for pure functional components.

• useMemo / useCallback to avoid recreating expensive values/handlers.

• Normalize state to reduce prop changes; lift state only when necessary.

• Code-splitting and lazy-loading routes/components.
  Be prepared to explain trade-offs (e.g., memoization adds comparison cost).

Behavioral Q: “Tell me about a time you fixed a UI bug under pressure.” (CAR)

• Context: During Black Friday, our product page intermittently froze on mobile Safari, spiking bounce rate to 70%.

• Action: I reproduced the bug with Web Inspector, traced it to a synchronous heavy image transform in a scroll handler, implemented a throttled, requestAnimationFrame-based approach, and rolled back via a feature flag while testing canary builds.

• Result: Crash reports dropped to near zero, page CLS improved by 32%, and revenue per session recovered within two hours.

How to Balance Clarity and Impact

1. Define the concept in plain language. 2) Show a minimal example. 3) Link to a practical outcome (maintainability, performance, KPI).
   Quiet confidence tip: If you blank, state your approach first (e.g., “I’d measure with the Profiler, then memoize hot paths”), then add details.

Likely follow-ups & crisp add-ons

• Specificity calculation: IDs (100) > classes/attributes/pseudo-classes (10) > elements/pseudo-elements (1). Chained selectors sum. Inline styles (~1000) win. Prefer component scoping over !important.

• Delegation pitfalls: event.stopPropagation() halts bubbling; use closest() to guard nested clicks; throttle high-frequency events.

• React extras: stable key props, avoid derived state, consider list virtualization. Always profile before/after so optimizations are evidence-based.

Side note: If you want a discrete safety net, Sensei AI (real-time interview copilot) can listen, detect the question, and surface a structured outline grounded in your résumé—so you stay focused while you speak.