Topic

Style Next.js applications

Definition

Next.js supports global CSS and scoped styling approaches such as CSS Modules while preserving component and route composition.

In simpler words

Use global CSS for application-wide foundations and local styles for a component’s own rules.

Style ownership should be as deliberate as component ownership so visual changes remain predictable and accessible.

After this you can

Choose global versus scoped CSS
Import global styles at the root boundary
Preserve focus and semantic styling

Choose the right style scope

Global CSS is appropriate for resets, design tokens, typography foundations, and application-wide element defaults. Component-specific selectors should stay scoped so a future route cannot accidentally inherit an unrelated rule.

CSS Modules give local class names without requiring global naming conventions. Whatever system a repository adopts, semantic HTML and visible focus states remain part of the component contract.

Global foundation and local component style

// app/layout.tsx
import './globals.css';

// TicketCard.tsx
import styles from './TicketCard.module.css';
return <article className={styles.card}>...</article>;

The root imports global foundations; the card owns its isolated rules.

Mistake: removing focus outlines globally

/* Wrong — keyboard users lose their location */
*:focus { outline: none; }

/* Right — provide a visible replacement */
:focus-visible { outline: 2px solid var(--focus-ring); }

A visual design rule must not erase keyboard navigation feedback.

Keep styles close to their meaning

Definition

A component style should describe that component’s visual responsibility, not a route-wide accident.

In simpler words

Prefer meaningful class names and tokens over brittle selectors that depend on nesting depth.

Use the Course’s established IBM Plex and neutral visual language instead of introducing a competing visual system for one lesson.

Test hover-only affordances with keyboard focus and touch use in mind.

Live playground

CSS playground

Move one selector from global CSS to a module and observe its scope.

Global CSS from root layout; prefer scoped rules for components.

next-css

Keep in mind

Import global foundations from the root layout.
Scope component rules to avoid selector collisions.
Never remove focus visibility without an accessible replacement.