Part 5: Custom Properties, Responsive Design, and Modern CSS

Introduction

This part covers the tooling layer that ties the rest of CSS together in a maintainable way: custom properties for design tokens, media queries for responsive layouts, and a set of modern CSS features that remove the need for JavaScript or pre-processors for things that used to require them. I use all of these in the stylesheets I write for documentation sites, tool dashboards, and web UIs.

---

CSS Custom Properties (Variables)

Custom properties let you define a value once and reuse it throughout the stylesheet. Changes in one place propagate everywhere — this is how I manage design tokens (colours, spacing, typography) in CSS without a build step.

Defining and Using

/* Define at :root — available everywhere */
:root {
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-text: #1a202c;
  --color-muted: #718096;
  --color-bg: #ffffff;
  --color-bg-subtle: #f7fafc;
  --color-border: #e2e8f0;
  --color-danger: #e53e3e;
  --color-success: #38a169;

  --font-body: system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Use with var() */
.button {
  background: var(--color-primary);
  color: #fff;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
}

.button:hover {
  background: var(--color-primary-dark);
}

Fallback Values

.element {
  color: var(--color-accent, #3b82f6);   /* fallback if --color-accent not defined */
}

Scoped Custom Properties

Custom properties are scoped to the element they are defined on and all its descendants. This enables component-level theming:

.card {
  --card-bg: var(--color-bg-subtle);
  --card-border: var(--color-border);

  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

/* Override for a specific variant */
.card--featured {
  --card-bg: #ebf8ff;
  --card-border: #bee3f8;
}

Dark Mode with Custom Properties

:root {
  --color-text: #1a202c;
  --color-bg: #ffffff;
  --color-border: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f7fafc;
    --color-bg: #1a202c;
    --color-border: #2d3748;
  }
}

All elements using var(--color-text) automatically switch without writing any additional selectors.

---

Responsive Design

Mobile-First Approach

I write styles for mobile first, then progressively enhance for wider screens. This means the default styles apply to narrow viewports and media queries add complexity for larger ones.

/* Default (mobile) */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Tablet and up */
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

My Breakpoint Tokens

:root {
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}

Note: CSS custom properties cannot be used inside media query conditions (a current limitation), so I reference the raw values in @media rules and keep this as documentation.

Media Query Syntax

/* Width-based */
@media (min-width: 768px) { }       /* viewport at least 768px wide */
@media (max-width: 767px) { }       /* viewport up to 767px wide */
@media (min-width: 640px) and (max-width: 1023px) { }  /* range */

/* Orientation */
@media (orientation: landscape) { }
@media (orientation: portrait) { }

/* User preferences */
@media (prefers-color-scheme: dark) { }
@media (prefers-color-scheme: light) { }
@media (prefers-reduced-motion: reduce) { }
@media (prefers-contrast: high) { }

/* Print */
@media print {
  .no-print { display: none; }
  body { font-size: 12pt; }
}

prefers-reduced-motion

Always respect this preference for transitions and animations:

.button {
  transition: background 0.2s, transform 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

Or more broadly:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Container Queries

Container queries respond to the size of a parent element rather than the viewport. This is a significant addition that makes truly reusable components possible.

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
}

@container card (min-width: 500px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

The .card switches layout based on how wide its container is — regardless of the viewport. The same component renders differently when placed in a wide sidebar versus a narrow panel, without separate media queries.

---

Modern CSS Features

CSS Nesting

Native CSS nesting — no pre-processor needed:

.nav {
  display: flex;
  gap: 1rem;

  & a {
    color: var(--color-text);
    text-decoration: none;

    &:hover {
      color: var(--color-primary);
    }

    &.active {
      font-weight: 600;
      color: var(--color-primary);
    }
  }

  @media (max-width: 640px) {
    flex-direction: column;
  }
}

Nesting is supported in all modern browsers as of 2024.

:is() and :where()

:is() matches any element in the list. Its specificity equals the most specific argument.

/* Without :is() */
h1 a, h2 a, h3 a, h4 a {
  color: var(--color-primary);
}

/* With :is() */
:is(h1, h2, h3, h4) a {
  color: var(--color-primary);
}

:where() works the same way but has zero specificity — useful for resets:

:where(ul, ol) {
  list-style: none;
  padding: 0;
  margin: 0;
}

:has() — The Parent Selector

Selects an element based on its descendants:

/* Card that contains an image gets a different layout */
.card:has(img) {
  display: grid;
  grid-template-columns: 120px 1fr;
}

/* Form group that contains an invalid input */
.form-group:has(input:invalid) label {
  color: var(--color-danger);
}

/* Nav item that contains the active link */
.nav-item:has(> a.active) {
  background: var(--color-bg-subtle);
}

:has() is one of the most powerful additions to recent CSS — things previously requiring JavaScript can now be done in CSS.

clamp() for Fluid Typography

/* font-size scales smoothly between 1rem (at 320px) and 1.5rem (at 1280px) */
h1 {
  font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem);
}

p {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
}

.container {
  width: clamp(320px, 90%, 1200px);
  margin: 0 auto;
}

clamp(min, value, max): uses the middle value but never goes below min or above max.

min() and max()

.container {
  width: min(90%, 1200px);   /* whichever is smaller */
}

.hero {
  height: max(50vh, 400px);  /* whichever is larger */
}

CSS Transitions

.button {
  background: var(--color-primary);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.button:active {
  transform: translateY(0);
}

transition syntax: property duration easing-function delay

Common easing functions:

• ease — slow → fast → slow (default)

• ease-in — slow start

• ease-out — slow end (best for exits)

• ease-in-out — slow start and end (best for enters)

• linear — constant speed

• cubic-bezier(x1, y1, x2, y2) — custom curve

CSS Animations

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-content {
  animation: fade-in 0.3s ease-out forwards;
}

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

scroll-behavior

html {
  scroll-behavior: smooth;
}

Anchor links (#section-id) will scroll smoothly. Respect prefers-reduced-motion:

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

scroll-margin-top

Prevents anchor-linked sections from scrolling under a sticky header:

:target,
[id] {
  scroll-margin-top: 5rem;   /* height of sticky header + some buffer */
}

accent-color

Styles native form controls (checkboxes, radio buttons, range inputs) with a brand colour:

:root {
  accent-color: var(--color-primary);
}

color-scheme

Tells the browser the page supports light/dark modes — affects browser-native elements like scrollbars and form controls:

:root {
  color-scheme: light dark;
}

---

Typography

A consistent typographic scale makes pages readable without much CSS:

:root {
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  --line-height-body: 1.6;
  --line-height-heading: 1.2;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-text);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;   /* slightly smaller than body text */
}

system-ui uses the OS's default UI font (San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android) — good performance, no font loading, familiar to users.

---

Utility Classes I Keep in Every Project

/* Layout */
.container {
  width: min(90%, 1200px);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text */
.text-muted  { color: var(--color-muted); }
.text-center { text-align: center; }
.font-mono   { font-family: var(--font-mono); }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visibility */
.hidden { display: none; }

---

Summary

Feature	Key Point
CSS custom properties	Define design tokens at :root, re-use with var()
Scoped variables	Override variables at component level for theming
Dark mode	Override custom properties inside prefers-color-scheme: dark
Mobile-first	Default styles for small screens, enhance with min-width queries
Container queries	Respond to parent size — makes truly reusable components
CSS nesting	Group related rules — no pre-processor needed
:is() / :where()	Match lists of selectors; :where() has zero specificity
:has()	Select based on descendants — replaces many JS patterns
clamp(min, val, max)	Fluid sizing between fixed bounds
transition	Smooth state changes
@keyframes + animation	Repeating or triggered motion
scroll-margin-top	Fix anchor links under sticky headers
accent-color	Brand colour for native form controls
prefers-reduced-motion	Always provide motion-safe fallback

---

Series Complete

This series covered CSS from first principles through to modern features:

Part	Topic
Part 1	Selectors, Specificity, and the Cascade
Part 2	Box Model, Display, and Positioning
Part 3	Flexbox
Part 4	CSS Grid
Part 5	Custom Properties, Responsive Design, and Modern CSS

With HTML and CSS covered, the next step is JavaScript — handling behaviour, interactivity, and DOM manipulation.