First Generation: Runtime Approaches#

The earliest CSS in JS libraries, such as styled-components and Emotion, used runtime approaches where styles were injected into the DOM at JavaScript runtime.

Core Characteristics:

• Styles are computed and injected at JS runtime
• Styles are defined using template literals or object syntax
• Support for dynamic styles based on props
• Automatic handling of browser prefixes and keyframe animations

1
import styled from 'styled-components'
2

3
const Button = styled.button`
4
  background: ${props => props.primary ? '#3b82f6' : '#fff'};
5
  color: ${props => props.primary ? '#fff' : '#3b82f6'};
6
  padding: 10px 20px;
7
  border-radius: 8px;
8
  border: 2px solid #3b82f6;
9
  cursor: pointer;
10
  font-size: 16px;
11
  transition: all 0.2s ease;
12

13
  &:hover {
14
    transform: translateY(-1px);
15
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
16
  }
17
`
18

19
//When in use
20
<Button primary>Submit</Button>

1
/** @jsxImportSource @emotion/react */
2
import { css } from '@emotion/react'
3

4
const buttonStyle = css`
5
  padding: 10px 20px;
6
  border-radius: 8px;
7
  font-size: 16px;
8
`
9

10
function App() {
11
  return (
12
    <button css={buttonStyle}>
13
      Click me
14
    </button>
15
  )
16
}

Second Generation: Compile-Time Zero-Runtime Approaches#

As performance requirements increased, compile-time zero-runtime CSS in JS solutions began to emerge. These approaches extract styles into static CSS files at build time, and no JavaScript is executed at runtime to generate styles.

Core Advantages:

• Zero runtime overhead, smaller bundle size
• Styles are extracted into .css files at build time
• Better SSR and SSG support
• Performance close to native CSS

1
import { style } from '@vanilla-extract/css'
2

3
export const button = style({
4
  padding: '10px 20px',
5
  borderRadius: '8px',
6
  fontSize: '16px',
7
  border: 'none',
8
  cursor: 'pointer',
9
  transition: 'all 0.2s ease',
10

11
  ':hover': {
12
    transform: 'translateY(-1px)',
13
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
14
  }
15
})
16

17
export const primary = style({
18
  background: '#3b82f6',
19
  color: '#fff'
20
})

1
import { css } from '../styled-system/css'
2

3
function App() {
4
  return (
5
    <button
6
      className={css({
7
        bg: 'blue.500',
8
        color: 'white',
9
        px: '5',
10
        py: '2.5',
11
        rounded: 'lg',
12
        cursor: 'pointer',
13
        _hover: {
14
          transform: 'translateY(-1px)',
15
          boxShadow: 'lg'
16
        }
17
      })}
18
    >
19
      Submit
20
    </button>
21
  )
22
}

1
import { defineConfig } from '@pandacss/dev'
2

3
export default defineConfig({
4
  theme: {
5
    tokens: {
6
      colors: {
7
        blue: {
8
          500: { value: '#3b82f6' }
9
        }
10
      },
11
      spacing: {
12
        5: { value: '1.25rem' },
13
        2.5: { value: '0.625rem' }
14
      }
15
    }
16
  }
17
})

1. Performance Improvement#

Traditional runtime CSS in JS requires computing style hashes and inserting style tags during component rendering, and these operations consume main thread time. In large applications, this overhead accumulates into a noticeable performance bottleneck.

Zero-runtime approaches move this process to the build stage. At runtime, pre-generated CSS class names are used directly, working in conjunction with the browser’s CSS parsing engine for better performance.

2. Better SSR Support#

Runtime approaches require extracting styles and injecting them into HTML during server-side rendering, which demands additional configuration and handling. In contrast, the static CSS files generated by zero-runtime approaches can be included directly via <link> tags, making the SSR process simpler and more natural.

3. Smaller Bundle Size#

Zero-runtime approaches eliminate the style runtime library code, significantly reducing the JavaScript bundle size. For performance-sensitive applications, this is an important advantage.

4. Good Compatibility with React Server Components#

React Server Components render on the server and do not support runtime CSS in JS. Zero-runtime approaches are naturally compatible with RSC, making them the ideal choice for building Next.js 14+ applications.