CSS-in-JS: Runtime vs Zero-Runtime

The CSS-in-JS Spectrum

CSS-in-JS isn't one thing — it's a spectrum from fully runtime (styles computed and injected via JavaScript) to fully static (styles extracted to CSS files at build time). The trade-offs are dramatic: runtime solutions offer maximum dynamism but add JavaScript bundle size and block rendering. Zero-runtime solutions extract to static CSS but limit what you can do dynamically.

React Server Components pushed the conversation further — runtime CSS-in-JS doesn't work in server components because there's no JavaScript execution on the server to inject styles.

Runtime CSS-in-JS

How It Works

// styled-components example
import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.variant === 'primary' ? '#3b82f6' : 'transparent'};
  color: ${props => props.variant === 'primary' ? 'white' : '#3b82f6'};
  padding: 0.75rem 1.5rem;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
`;

// Usage
<Button variant="primary">Click me</Button>

At runtime, styled-components:

1. Parses the template literal
2. Evaluates prop-based interpolations
3. Generates a unique class name
4. Injects a <style> tag into the document head
5. Applies the class to the element

The Performance Cost

• Bundle size: ~12-15KB gzipped for styled-components
• Runtime: Style parsing and injection on every render (cached, but initial cost exists)
• SSR complexity: Requires style extraction during server rendering to prevent flash of unstyled content
• React Server Components: Incompatible — no JavaScript execution in server components

Emotion — Slightly Lighter

import { css } from '@emotion/react';

const buttonStyle = css`
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  background: var(--color-primary);
`;

// Or object syntax
const buttonObj = css({
  padding: '0.75rem 1.5rem',
  borderRadius: '8px',
  background: 'var(--color-primary)',
});

Zero-Runtime CSS-in-JS

vanilla-extract — Type-Safe Static CSS

// button.css.ts
import { style, styleVariants } from '@vanilla-extract/css';

const base = style({
  padding: '0.75rem 1.5rem',
  borderRadius: '8px',
  cursor: 'pointer',
  border: 'none',
  fontWeight: 500,
});

export const variants = styleVariants({
  primary: [base, { background: '#3b82f6', color: 'white' }],
  secondary: [base, { background: '#f3f4f6', color: '#1f2937' }],
  ghost: [base, { background: 'transparent', color: '#3b82f6' }],
});

// Button.tsx
import { variants } from './button.css';

export function Button({ variant = 'primary', children }) {
  return <button className={variants[variant]}>{children}</button>;
}

Key advantages:

• TypeScript type checking for all CSS values
• Extracts to static .css files at build time — zero JavaScript runtime
• Works with React Server Components
• Co-located with components but produces real CSS

Panda CSS — Zero-Runtime with Utility Patterns

import { css } from '../styled-system/css';

function Card() {
  return (
    <div className={css({
      padding: '6',
      borderRadius: 'lg',
      bg: 'white',
      shadow: 'md',
      _hover: { shadow: 'lg' },
    })}>
      Content
    </div>
  );
}

Panda CSS scans your files at build time, generates utility CSS, and outputs static stylesheets. It combines the DX of styled-components with the performance of static CSS.

Comparison Matrix