Why CSS-in-JS considerations in NextJS? - Purpose & Use Cases

The Big Idea

Discover how styling your app can become as easy as writing your component code!

The Scenario

Imagine styling each part of your website by writing separate CSS files and linking them manually. When you want to change a button color, you have to find the right file, update it, and hope it doesn't break other pages.

The Problem

Managing CSS separately can cause confusion, with styles leaking between components or becoming outdated. It's hard to keep track of which styles belong where, leading to bugs and slow updates.

The Solution

CSS-in-JS lets you write styles directly inside your JavaScript components. This keeps styles scoped, easier to maintain, and automatically updates the look when your component changes.

Before vs After

✗ Before

/* styles.css */
.button { color: blue; }

<button class="button">Click me</button>

✓ After

const buttonStyle = { color: 'blue' };

<button style={buttonStyle}>Click me</button>

What It Enables

It enables seamless, component-focused styling that stays organized and adapts instantly as your app grows.

Real Life Example

Think of a shopping app where each product card has unique styles. With CSS-in-JS, each card's style lives with its code, making updates fast and safe without affecting other parts.

Key Takeaways

Manual CSS can be hard to manage and error-prone.

CSS-in-JS keeps styles close to components for better organization.

It makes styling dynamic, maintainable, and scalable.