Client-Side Tooling · 4 of 8

CSS Systems

How a frontend team scales styling across thousands of components without losing its mind. Utility-first, scoped CSS, design tokens — every approach has a vocal fan club.

TailwindSassCSS ModulesCSS-in-JSDesign Tokens
← Back to Client Side
Quick Facts

At a Glance

Basic Concepts

  • Cascade: CSS resolves conflicting rules by specificity, source order, and origin.
  • Specificity wars are why teams reach for scoped systems (CSS Modules, Tailwind, BEM) — naming + isolation prevent global collisions.
  • Design tokens are named values (colors, spacing, type) defined once, used everywhere.
  • CSS variables (custom properties) make theming & dark mode trivial in modern browsers.
  • The platform has caught up — modern CSS (container queries, :has(), nesting, cascade layers) eliminates many old reasons to reach for preprocessors.
Landscape

The Major Approaches

ApproachExamplesOne-line summary
Utility-firstTailwind CSS, UnoCSS, WindiCompose UI from atomic classes; no naming.
CSS ModulesCSS Modules, Vue scoped <style>, Svelte scoped <style>Local-by-default class names, no globals.
PreprocessorsSass, Less, StylusVariables, nesting, mixins — predates modern CSS but still everywhere.
CSS-in-JSstyled-components, Emotion, vanilla-extract, LinariaWrite styles in JS/TS; per-component, dynamic.
Atomic / FunctionalTailwind, Tachyons, ACSSGenerate one class per CSS declaration.
Design systemsMaterial 3, Apple HIG, Carbon, SpectrumCurated tokens + components.
Reset / NormalizeNormalize.css, modern-css-reset, Tailwind PreflightSmooth out browser defaults.
Post-processorsPostCSS, Lightning CSS, AutoprefixerVendor prefixes, modern syntax → old, optimizations.
Mechanics

Major Approaches in Depth

Tailwind CSS — Utility-First

Class names are the styles. No CSS files for components.

<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
  Save
</button>
  • JIT scans your templates and generates only the classes you use → tiny bundles.
  • Design tokens defined in tailwind.config.js.
  • Loved for velocity, polarizing for verbose markup.
  • Tailwind 4 (Oxide engine) is now Rust-built, lightning fast.
CSS Modules & Scoped Styles

Class names get hashed at build time, so .button in two files won't collide.

/* Button.module.css */
.primary { background: #0066cc; }

// Button.tsx
import styles from './Button.module.css';
<button className={styles.primary}>Save</button>

Vue and Svelte ship the same idea in their <style scoped> blocks.

Sass — The Original Preprocessor

Variables, nesting, mixins, partials, math. Most modern CSS now supports nesting natively, but Sass still wins on:

  • Mixins — parameterized snippets you call.
  • Functions — reusable logic for color manipulation, sizing.
  • @use / @forward module system for big design systems.
  • Loops for generating repetitive utilities.
CSS-in-JS — Pros & the Modern Backlash

Writing styles in JS gave per-component scope and dynamic theming, but classic runtime libraries (styled-components, Emotion) inject styles at runtime — slower and incompatible with React Server Components.

  • Runtime CSS-in-JS (styled-components, Emotion) — falling out of favor.
  • Zero-runtime CSS-in-JS (vanilla-extract, Linaria, Panda CSS) — write JS-y syntax, ship plain CSS.
  • Object styles are still nice for one-off dynamic values; reach for inline style for those today.
Modern CSS Features Worth Knowing
  • Custom properties (CSS variables) — runtime theming & dark mode.
  • Nesting — write Sass-style nested selectors in plain CSS.
  • Container queries — style based on parent size, not viewport.
  • :has() — parent selector, finally.
  • Cascade layers (@layer) — predictable specificity for design systems.
  • Subgrid, Anchor positioning, View transitions.
Design Tokens

Named values (color, spacing, font-size) defined once, consumed everywhere — usually as CSS variables or in a token JSON consumed by Tailwind / Style Dictionary / Tokens Studio.

:root {
  --color-primary: #065A82;
  --space-md:     1rem;
  --radius-md:    8px;
}
Picking

Which to Choose

New Project, Modern Stack

Tailwind v4 + a small set of design tokens.

Component Library

CSS Modules or vanilla-extract — predictable, framework-agnostic.

Design System / Theming

CSS custom properties + a token pipeline (Style Dictionary).

Static / Marketing Site

Plain modern CSS is enough — actually.

Continue

Other Client-Side Tooling

BundlersPackage ManagersTranspilersState ManagementComponent LibrariesAccessibilityInternationalization ↑ Back to Client Side