CSS Techniques

CSS has matured from a simple styling language into a powerful system capable of complex layouts, dynamic theming, fluid typography, and scroll-driven interactions. This page covers the most impactful modern CSS features with practical code examples.

Hub: Graphics & Web Design Related: Responsive Design | Web Fonts

CSS Custom Properties

Custom properties (CSS variables) enable runtime theming, reduce repetition, and can be manipulated with JavaScript.

:root {
  --color-primary: #0d6efd;
  --color-surface: #ffffff;
  --color-text: #212529;
  --radius: 0.5rem;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #6ea8fe;
    --color-surface: #1a1a2e;
    --color-text: #eaeaea;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}

.card {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  cursor: pointer;
}

Custom properties cascade and inherit, so you can override them on any element:

.sidebar {
  --color-primary: #198754;   /* Green theme inside sidebar */
}

Toggle themes with a single JavaScript line:

document.documentElement.setAttribute('data-theme', 'dark');

[data-theme="dark"] {
  --color-surface: #1a1a2e;
  --color-text: #eaeaea;
}

CSS Grid Layouts

Grid handles both simple and highly complex two-dimensional layouts:

/* Named grid areas for a classic page layout */
.page {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-content { grid-area: content; }
.page-aside   { grid-area: aside; }
.page-footer  { grid-area: footer; }

@media (max-width: 768px) {
  .page {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

Container Queries

Container queries let components respond to their container rather than the viewport:

.widget-container {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .widget {
    display: flex;
    gap: 2rem;
  }
  .widget__image {
    flex: 0 0 40%;
  }
}

@container (max-width: 499px) {
  .widget__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

The :has() Selector

:has() is the long-awaited "parent selector." It matches an element based on its descendants, siblings, or state.

/* Style a card differently when it contains an image */
.card:has(img) {
  padding: 0;
}
.card:has(img) .card-body {
  padding: 1.5rem;
}

/* Highlight a form group when its input is focused */
.form-group:has(input:focus) {
  outline: 2px solid var(--color-primary);
  border-radius: var(--radius);
}

/* Style the body when a modal is open */
body:has(.modal[open]) {
  overflow: hidden;
}

/* Conditionally show a submit button only when all required fields are valid */
form:has(:invalid) .btn-submit {
  opacity: 0.5;
  pointer-events: none;
}

Fluid Sizing with clamp()

clamp(minimum, preferred, maximum) replaces multiple media queries for fluid typography and spacing:

h1 {
  font-size: clamp(1.75rem, 4vw + 0.5rem, 3.5rem);
}

p {
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
  line-height: 1.6;
}

.section {
  padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 3rem);
}

.container {
  width: clamp(320px, 90vw, 1200px);
  margin-inline: auto;
}

The aspect-ratio Property

aspect-ratio maintains proportions without the old padding-bottom hack:

.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.avatar {
  aspect-ratio: 1;
  width: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

.card-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

Scroll Snap

Scroll snap creates carousel-like experiences with pure CSS:

.carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 1rem;
  -webkit-overflow-scrolling: touch;
}

.carousel > .slide {
  flex: 0 0 80%;
  scroll-snap-align: center;
  border-radius: var(--radius);
}

@media (min-width: 768px) {
  .carousel > .slide {
    flex: 0 0 40%;
  }
}

/* Vertical scroll snap for full-page sections */
.fullpage {
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.fullpage > section {
  height: 100dvh;
  scroll-snap-align: start;
}

Logical Properties

Logical properties replace physical directions (left, right, top, bottom) with flow-relative equivalents. This is essential for internationalization and RTL support.

.card {
  margin-block: 1rem;           /* top + bottom */
  margin-inline: auto;          /* left + right */
  padding-block-start: 2rem;    /* top */
  padding-inline: 1.5rem;       /* left + right */
  border-inline-start: 4px solid var(--color-primary);  /* left in LTR */
}

.flex-row {
  display: flex;
  gap: 1rem;
  flex-direction: row;          /* Already logical */
}

/* Sizing */
.sidebar {
  inline-size: 250px;           /* width in horizontal writing mode */
  block-size: 100%;             /* height in horizontal writing mode */
}

Modern CSS Reset

A minimal, modern reset that works with all the techniques above:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

These techniques compose naturally. Custom properties feed values into clamp() expressions. Grid and container queries handle layout. Logical properties ensure international readiness. Together they form a CSS architecture that is maintainable, performant, and future-proof.