CSS · CSS Tools & Workflow

CSS-in-JS

Write CSS directly in JavaScript/React components

Find videos you like?

Save to resource drawer for future reference!

What is CSS-in-JS?

A pattern where you write CSS styles inside JavaScript files, typically within React components

Write CSS as JavaScript objects or template literals

Styles scoped to components automatically

Dynamic styling based on props/state

Popular libraries: styled-components, Emotion

No separate CSS files needed

Used by major companies (Netflix, Airbnb)

CSS-in-JS in Simple Terms

Instead of writing CSS in separate .css files, you write it directly in your JavaScript. This keeps styles right next to the components they style, makes styles dynamic, and automatically scopes them to prevent conflicts!

Traditional CSS vs CSS-in-JS

What's the difference?

Traditional CSS

• Separate .css files
• Global scope (risk of conflicts)
• Static styles
• Manual class name management
• Hard to delete unused styles

button.css

CSS

.button {
  background: blue;
  padding: 10px;
}

CSS-in-JS

• Styles in JavaScript files
• Scoped automatically
• Dynamic styles (props/state)
• Auto-generated class names
• Unused styles removed automatically

Button.js

CSS

const Button = styled.button`
  background: blue;
  padding: 10px;
`;

Popular CSS-in-JS Libraries

The main players

styled-components

Most popular CSS-in-JS library. Uses tagged template literals.

40M+ downloads/month

Emotion

High-performance CSS-in-JS. Similar to styled-components but faster.

15M+ downloads/month

JSS (CSS Modules)

Used by Material-UI. CSS as JavaScript objects.

10M+ downloads/month

Vanilla Extract

Zero-runtime CSS-in-TypeScript. Generates static CSS.

Modern, type-safe

styled-components - Most Popular

How it works

Installation

CSS

npm install styled-components

# TypeScript users
npm install @types/styled-components -D

Basic Usage

CSS

import styled from 'styled-components';

// Create a styled button
const Button = styled.button`
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  
  &:hover {
    background: #2563eb;
  }
`;

// Use it like a regular component
function App() {
  return (
    <Button>Click Me</Button>
  );
}

Dynamic Styling with Props

CSS

// Button that changes based on props
const Button = styled.button`
  background: ${props => props.primary ? '#3b82f6' : '#6b7280'};
  color: white;
  padding: ${props => props.large ? '16px 32px' : '12px 24px'};
  border: none;
  border-radius: 6px;
  cursor: pointer;
  
  &:hover {
    opacity: 0.9;
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

// Usage with different props
function App() {
  return (
    <>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
      <Button primary large>Large Primary</Button>
      <Button disabled>Disabled</Button>
    </>
  );
}

Extending Styles

CSS

// Base button
const Button = styled.button`
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
`;

// Extend the base button
const PrimaryButton = styled(Button)`
  background: #3b82f6;
  color: white;
`;

const DangerButton = styled(Button)`
  background: #ef4444;
  color: white;
`;

// Usage
function App() {
  return (
    <>
      <PrimaryButton>Save</PrimaryButton>
      <DangerButton>Delete</DangerButton>
    </>
  );
}

Emotion - High Performance

Alternative to styled-components

Installation & Setup

CSS

npm install @emotion/react @emotion/styled

# Usage with styled API (similar to styled-components)
import styled from '@emotion/styled';

const Button = styled.button`
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
`;

Using the css Prop

CSS

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

// Use css prop directly on elements
function Button() {
  return (
    <button
      css={css`
        background: #3b82f6;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        
        &:hover {
          background: #2563eb;
        }
      `}
    >
      Click Me
    </button>
  );
}

Real-World Example

Complete component with CSS-in-JS

Card Component with styled-components

CSS

import styled from 'styled-components';

// Styled components
const CardContainer = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
`;

const CardTitle = styled.h3`
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #1f2937;
`;

const CardContent = styled.p`
  margin: 0 0 16px 0;
  color: #6b7280;
  line-height: 1.6;
`;

const CardButton = styled.button`
  background: ${props => props.variant === 'primary' ? '#3b82f6' : '#6b7280'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  
  &:hover {
    opacity: 0.9;
  }
`;

// Use the styled components
function Card({ title, content }) {
  return (
    <CardContainer>
      <CardTitle>{title}</CardTitle>
      <CardContent>{content}</CardContent>
      <CardButton variant="primary">Read More</CardButton>
    </CardContainer>
  );
}

export default Card;

Pros and Cons

Should you use CSS-in-JS?

✅ Advantages

✓ Scoped Styles: No name conflicts
✓ Dynamic: Styles based on props/state
✓ Colocation: Styles with component
✓ Dead Code Elimination: Unused styles removed
✓ TypeScript: Type-safe props
✓ No Class Names: Auto-generated

⚠️ Disadvantages

⚠ Bundle Size: Adds library weight
⚠ Runtime: Styles generated at runtime
⚠ Learning Curve: New syntax to learn
⚠ Debugging: Auto-generated class names
⚠ SSR Complexity: Needs server setup
⚠ Performance: Can be slower than CSS

💡 Modern Alternative: Consider Tailwind CSS or CSS Modules for simpler projects. Use CSS-in-JS when you need highly dynamic styling based on props/state.

Theming with CSS-in-JS

Dark mode and themes made easy

Theme Provider with styled-components

CSS

import { ThemeProvider } from 'styled-components';

// Define your theme
const lightTheme = {
  colors: {
    primary: '#3b82f6',
    background: '#ffffff',
    text: '#1f2937',
  },
};

const darkTheme = {
  colors: {
    primary: '#3b82f6',
    background: '#1f2937',
    text: '#f3f4f6',
  },
};

// Styled component using theme
const Button = styled.button`
  background: ${props => props.theme.colors.primary};
  color: white;
  padding: 12px 24px;
`;

const Container = styled.div`
  background: ${props => props.theme.colors.background};
  color: ${props => props.theme.colors.text};
  min-height: 100vh;
`;

// Use ThemeProvider
function App() {
  const [isDark, setIsDark] = useState(false);
  
  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <Container>
        <Button onClick={() => setIsDark(!isDark)}>
          Toggle Theme
        </Button>
      </Container>
    </ThemeProvider>
  );
}

When to Use CSS-in-JS

Best scenarios

React Applications

Component-based styling works great with React

Dynamic UIs

Styles that change based on props/state

Design Systems

Themeable component libraries

TypeScript Projects

Type-safe styling with prop validation

CSS-in-JS Best Practices

Keep Styles Close: Define styled components near where they're used
Use Theme: Store colors, spacing in a theme object
Avoid Inline Styles: Use styled-components, not inline styles
Name Components: Give styled components descriptive names
Reuse Styles: Extend base components instead of duplicating
Performance: Use shouldForwardProp to avoid prop forwarding
SSR: Configure properly for server-side rendering

When to Avoid CSS-in-JS

❌ Static Sites: Plain CSS is faster and simpler
❌ Performance Critical: CSS-in-JS has runtime overhead
❌ Simple Projects: Overkill for basic styling needs
❌ Team Unfamiliar: Learning curve can slow development
❌ Non-React: Better alternatives exist for other frameworks

Modern Alternatives to Consider

Tailwind CSS: Utility-first CSS (no runtime, static)

CSS Modules: Scoped CSS without JavaScript (built into Next.js)

Vanilla Extract: Zero-runtime CSS-in-TypeScript

Panda CSS: Build-time CSS-in-JS (no runtime)

Previous Topic

PostCSS

PostCSS plugins, Autoprefixer, CSS-next, and modern CSS transformations.

Next Topic

Cross-Browser CSS

Browser compatibility, vendor prefixes, feature detection, and progressive enhancement.

Ask a Question

Have a question about CSS-in-JS? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · CSS Tools & Workflow

CSS-in-JS

Write CSS directly in JavaScript/React components

Find videos you like?

Save to resource drawer for future reference!

What is CSS-in-JS?

A pattern where you write CSS styles inside JavaScript files, typically within React components

Write CSS as JavaScript objects or template literals

Styles scoped to components automatically

Dynamic styling based on props/state

Popular libraries: styled-components, Emotion

No separate CSS files needed

Used by major companies (Netflix, Airbnb)

CSS-in-JS in Simple Terms

Traditional CSS vs CSS-in-JS

What's the difference?

Traditional CSS

• Separate .css files
• Global scope (risk of conflicts)
• Static styles
• Manual class name management
• Hard to delete unused styles

button.css

CSS

.button {
  background: blue;
  padding: 10px;
}

CSS-in-JS

• Styles in JavaScript files
• Scoped automatically
• Dynamic styles (props/state)
• Auto-generated class names
• Unused styles removed automatically

Button.js

CSS

const Button = styled.button`
  background: blue;
  padding: 10px;
`;

Popular CSS-in-JS Libraries

The main players

styled-components

Most popular CSS-in-JS library. Uses tagged template literals.

40M+ downloads/month

Emotion

High-performance CSS-in-JS. Similar to styled-components but faster.

15M+ downloads/month

JSS (CSS Modules)

Used by Material-UI. CSS as JavaScript objects.

10M+ downloads/month

Vanilla Extract

Zero-runtime CSS-in-TypeScript. Generates static CSS.

Modern, type-safe

styled-components - Most Popular

How it works

Installation

CSS

npm install styled-components

# TypeScript users
npm install @types/styled-components -D

Basic Usage

CSS

import styled from 'styled-components';

// Create a styled button
const Button = styled.button`
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  
  &:hover {
    background: #2563eb;
  }
`;

// Use it like a regular component
function App() {
  return (
    <Button>Click Me</Button>
  );
}

Dynamic Styling with Props

CSS

// Button that changes based on props
const Button = styled.button`
  background: ${props => props.primary ? '#3b82f6' : '#6b7280'};
  color: white;
  padding: ${props => props.large ? '16px 32px' : '12px 24px'};
  border: none;
  border-radius: 6px;
  cursor: pointer;
  
  &:hover {
    opacity: 0.9;
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

// Usage with different props
function App() {
  return (
    <>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
      <Button primary large>Large Primary</Button>
      <Button disabled>Disabled</Button>
    </>
  );
}

Extending Styles

CSS

// Base button
const Button = styled.button`
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
`;

// Extend the base button
const PrimaryButton = styled(Button)`
  background: #3b82f6;
  color: white;
`;

const DangerButton = styled(Button)`
  background: #ef4444;
  color: white;
`;

// Usage
function App() {
  return (
    <>
      <PrimaryButton>Save</PrimaryButton>
      <DangerButton>Delete</DangerButton>
    </>
  );
}

Emotion - High Performance

Alternative to styled-components

Installation & Setup

CSS

npm install @emotion/react @emotion/styled

# Usage with styled API (similar to styled-components)
import styled from '@emotion/styled';

const Button = styled.button`
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
`;

Using the css Prop

CSS

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

// Use css prop directly on elements
function Button() {
  return (
    <button
      css={css`
        background: #3b82f6;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        
        &:hover {
          background: #2563eb;
        }
      `}
    >
      Click Me
    </button>
  );
}

Real-World Example

Complete component with CSS-in-JS

Card Component with styled-components

CSS

import styled from 'styled-components';

// Styled components
const CardContainer = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
`;

const CardTitle = styled.h3`
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #1f2937;
`;

const CardContent = styled.p`
  margin: 0 0 16px 0;
  color: #6b7280;
  line-height: 1.6;
`;

const CardButton = styled.button`
  background: ${props => props.variant === 'primary' ? '#3b82f6' : '#6b7280'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  
  &:hover {
    opacity: 0.9;
  }
`;

// Use the styled components
function Card({ title, content }) {
  return (
    <CardContainer>
      <CardTitle>{title}</CardTitle>
      <CardContent>{content}</CardContent>
      <CardButton variant="primary">Read More</CardButton>
    </CardContainer>
  );
}

export default Card;

Pros and Cons

Should you use CSS-in-JS?

✅ Advantages

✓ Scoped Styles: No name conflicts
✓ Dynamic: Styles based on props/state
✓ Colocation: Styles with component
✓ Dead Code Elimination: Unused styles removed
✓ TypeScript: Type-safe props
✓ No Class Names: Auto-generated

⚠️ Disadvantages

⚠ Bundle Size: Adds library weight
⚠ Runtime: Styles generated at runtime
⚠ Learning Curve: New syntax to learn
⚠ Debugging: Auto-generated class names
⚠ SSR Complexity: Needs server setup
⚠ Performance: Can be slower than CSS

💡 Modern Alternative: Consider Tailwind CSS or CSS Modules for simpler projects. Use CSS-in-JS when you need highly dynamic styling based on props/state.

Theming with CSS-in-JS

Dark mode and themes made easy

Theme Provider with styled-components

CSS

import { ThemeProvider } from 'styled-components';

// Define your theme
const lightTheme = {
  colors: {
    primary: '#3b82f6',
    background: '#ffffff',
    text: '#1f2937',
  },
};

const darkTheme = {
  colors: {
    primary: '#3b82f6',
    background: '#1f2937',
    text: '#f3f4f6',
  },
};

// Styled component using theme
const Button = styled.button`
  background: ${props => props.theme.colors.primary};
  color: white;
  padding: 12px 24px;
`;

const Container = styled.div`
  background: ${props => props.theme.colors.background};
  color: ${props => props.theme.colors.text};
  min-height: 100vh;
`;

// Use ThemeProvider
function App() {
  const [isDark, setIsDark] = useState(false);
  
  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <Container>
        <Button onClick={() => setIsDark(!isDark)}>
          Toggle Theme
        </Button>
      </Container>
    </ThemeProvider>
  );
}

When to Use CSS-in-JS

Best scenarios

React Applications

Component-based styling works great with React

Dynamic UIs

Styles that change based on props/state

Design Systems

Themeable component libraries

TypeScript Projects

Type-safe styling with prop validation

CSS-in-JS Best Practices

Keep Styles Close: Define styled components near where they're used
Use Theme: Store colors, spacing in a theme object
Avoid Inline Styles: Use styled-components, not inline styles
Name Components: Give styled components descriptive names
Reuse Styles: Extend base components instead of duplicating
Performance: Use shouldForwardProp to avoid prop forwarding
SSR: Configure properly for server-side rendering

When to Avoid CSS-in-JS

❌ Static Sites: Plain CSS is faster and simpler
❌ Performance Critical: CSS-in-JS has runtime overhead
❌ Simple Projects: Overkill for basic styling needs
❌ Team Unfamiliar: Learning curve can slow development
❌ Non-React: Better alternatives exist for other frameworks

Modern Alternatives to Consider

Tailwind CSS: Utility-first CSS (no runtime, static)

CSS Modules: Scoped CSS without JavaScript (built into Next.js)

Vanilla Extract: Zero-runtime CSS-in-TypeScript

Panda CSS: Build-time CSS-in-JS (no runtime)

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

PostCSS

Cross-Browser CSS

Building Your Learning Module...

CSS-in-JS

CSS-in-JS in Simple Terms

Traditional CSS

button.css

CSS-in-JS

Button.js

styled-components

Emotion

JSS (CSS Modules)

Vanilla Extract

Installation

Basic Usage

Dynamic Styling with Props

Extending Styles

Installation & Setup

Using the css Prop

Card Component with styled-components

✅ Advantages

⚠️ Disadvantages

Theme Provider with styled-components

React Applications

Dynamic UIs

Design Systems

TypeScript Projects

CSS-in-JS Best Practices

When to Avoid CSS-in-JS

Modern Alternatives to Consider

PostCSS

Cross-Browser CSS

CSS-in-JS

CSS-in-JS in Simple Terms

Traditional CSS

button.css

CSS-in-JS

Button.js

styled-components

Emotion

JSS (CSS Modules)

Vanilla Extract

Installation

Basic Usage

Dynamic Styling with Props

Extending Styles

Installation & Setup

Using the css Prop

Card Component with styled-components

✅ Advantages

⚠️ Disadvantages

Theme Provider with styled-components

React Applications

Dynamic UIs

Design Systems

TypeScript Projects

CSS-in-JS Best Practices

When to Avoid CSS-in-JS

Modern Alternatives to Consider