CSS-in-JS

CSS-in-JS colocates styles with components and expresses dynamic variants from props or state. Implementations split into runtime injection (styled-components, Emotion) and compile-time extraction (Linaria, vanilla-extract, Panda).

Runtime libraries inject rules in the browser — flexible but costly for SSR streaming and cache unless managed. Compile-time tools emit static CSS files with better caching and fewer bytes on the critical path.

					// compile-time style: class generated at build
const button = css({ padding: '0.5rem', background: 'var(--accent)' });

// runtime style: new rules per dynamic value if uncached
const Box = styled.div<{ $gap: number }>`
  display: flex;
  gap: ${({ $gap }) => $gap}px;
`;
				

On interviews: compare runtime cost, critical CSS extraction, theme propagation, and when co-location beats a shared stylesheet.

Common pitfalls: unbounded dynamic style generation; SSR style order bugs; skipping shared token layers.

Checklist:

• Know runtime versus compile-time trade-offs.
• Plan SSR injection order and hydration.
• Cache or constrain dynamic values.
• Propagate themes through tokens, not ad hoc props.