Modern CSS Development Techniques: Ditch JS, Embrace Pure CSS Possibilities

CSS Custom Properties (Variables)

Variables are defined on :root and can be reused throughout the stylesheet. They enable dynamic theming and allow component‑level overrides without altering global values.

/* Define variables */
:root {
  --color-primary: #4f6ef7;
  --color-text: #1a1a1a;
  --spacing-unit: 8px;
  --border-radius: 8px;
  --transition-speed: 0.25s;
}

/* Use variables */
.button {
  background: var(--color-primary);
  color: #fff;
  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
  border-radius: var(--border-radius);
  transition: background var(--transition-speed) ease;
}

/* Component‑level overrides */
.card--danger { --color-primary: #e53e3e; }
.card--success { --color-primary: #38a169; }

/* JavaScript can update a variable at runtime */
document.documentElement.style.setProperty('--color-primary', '#ff6b6b');

Native CSS Nesting

Supported natively in Chrome 112+, Firefox 117+, Safari 16.5+. Nesting removes the need for preprocessors such as SCSS.

.nav {
  display: flex;
  gap: 16px;

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

    &:hover { color: var(--color-primary); }
    &.active { font-weight: 600; border-bottom: 2px solid var(--color-primary); }
  }

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

Combining nesting with :is() and :where() reduces selector specificity.

.form {
  & :is(input, textarea, select) {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;

    &:focus {
      border-color: var(--color-primary);
      outline: none;
      box-shadow: 0 0 0 3px rgb(79 110 247 / 0.15);
    }
  }
}

Logical Properties

Logical properties replace physical side‑specific properties, simplifying LTR/RTL layouts.

.box {
  margin-inline: 16px;      /* left + right */
  padding-block: 8px;       /* top + bottom */
  border-inline-start: 2px solid blue; /* flips in RTL */
  text-align: start;        /* left in LTR, right in RTL */
}

/* Shorthand for inset */
.card {
  inset: 0;                 /* top/right/bottom/left */
  inset-inline: 16px;      /* left/right */
  inset-block-start: 20px; /* top */
}

Container Queries

Container queries let a component respond to the size of its own container rather than the viewport, enabling true component‑level responsiveness.

/* Make the container a query container */
.card-wrapper { container-type: inline-size; container-name: card; }

/* Styles for a wide container */
@container card (min-width: 400px) {
  .card { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
  .card__image { height: 100%; object-fit: cover; }
}

/* Styles for a narrow container */
@container card (max-width: 399px) {
  .card__image { width: 100%; height: 160px; }
}

Real‑world example: when a sidebar collapses, hide the label text.

.sidebar { container-type: inline-size; width: var(--sidebar-width, 280px); }

@container (max-width: 200px) {
  .menu-item__label { display: none; }
}

Container‑query units such as cqi (1 % of the container inline size) enable fluid typography.

@container (min-width: 300px) {
  .card__title { font-size: clamp(1rem, 5cqi, 2rem); }
}

The :has() Selector – CSS “Parent Selector”

:has()

allows styling a parent based on the presence of child elements.

.card:has(img) { grid-template-rows: auto 1fr; }
.form-item:has(.error-message) label { color: #e53e3e; }
.form-item:has(.error-message) input { border-color: #e53e3e; }
.list:has(li:nth-child(4)) { columns: 2; }
.nav-group:has(a.active) .nav-group__title { color: var(--color-primary); font-weight: 600; }
.checkbox-wrapper:has(input:checked) .label-text { text-decoration: line-through; color: #999; }

Demo – strike‑through a todo item when its checkbox is checked:

<li class="todo-item">
  <input type="checkbox" id="todo-1" />
  <label for="todo-1">Complete this article</label>
</li>

.todo-item:has(input:checked) label { text-decoration: line-through; opacity: 0.5; }

Pure‑CSS Dark Mode

The prefers-color-scheme media query switches variables based on the OS theme, requiring no JavaScript.

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --card-bg: #f5f5f5;
  --border: #e0e0e0;
  --shadow: 0 2px 8px rgb(0 0 0 / 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f0f;
    --text: #e8e8e8;
    --card-bg: #1e1e1e;
    --border: #333333;
    --shadow: 0 2px 8px rgb(0 0 0 / 0.4);
  }
}

body { background: var(--bg); color: var(--text); }
.card { background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow); }

Manual override using a data-theme attribute:

[data-theme="light"] { --bg: #ffffff; --text: #1a1a1a; }
[data-theme="dark"] { --bg: #0f0f0f; --text: #e8e8e8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --bg: #0f0f0f; --text: #e8e8e8; }
}

Pure‑CSS Accordion

Using <details> and <summary> provides native collapse behavior.

<details class="accordion">
  <summary class="accordion__header">
    <span>What is a container query?</span>
    <svg class="accordion__icon" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>
  </summary>
  <div class="accordion__body">
    <p>Container queries allow you to style based on the size of a parent container…</p>
  </div>
</details>

.accordion { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.accordion__header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; cursor: pointer; background: var(--card-bg); font-weight: 500; }
.accordion__icon { width: 20px; height: 20px; transition: transform 0.3s ease; stroke: currentColor; fill: none; stroke-width: 2; }
.accordion[open] .accordion__icon { transform: rotate(180deg); }
.accordion__body { padding: 16px 20px; border-top: 1px solid var(--border); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .accordion__body { overflow: hidden; }
  details:not([open]) .accordion__body { height: 0; }
  details[open] .accordion__body { height: auto; animation: slideDown 0.3s ease; }
  @keyframes slideDown { from { height: 0; opacity: 0; } to { height: auto; opacity: 1; } }
}

Pure‑CSS Dialog

The native <dialog> element combined with minimal JavaScript for opening/closing creates a lightweight modal.

<dialog id="modal" class="modal">
  <div class="modal__content">
    <h2>Confirm Deletion</h2>
    <p>This action cannot be undone. Proceed?</p>
    <div class="modal__actions">
      <button class="btn btn--ghost" onclick="document.getElementById('modal').close()">Cancel</button>
      <button class="btn btn--danger">Delete</button>
    </div>
  </div>
</dialog>
<button onclick="document.getElementById('modal').showModal()">Open Dialog</button>

.modal { border: none; border-radius: 12px; padding: 0; box-shadow: 0 20px 60px rgb(0 0 0 / 0.3); max-width: min(90vw, 480px); width: 100%; }
.modal::backdrop { background: rgb(0 0 0 / 0.5); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in 0.25s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal__content { padding: 24px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

Pure‑CSS Tab Switch

Using the :target pseudo‑class with anchor links creates a JavaScript‑free tab interface.

<div class="tabs">
  <nav class="tabs__nav">
    <a href="#tab-1" class="tabs__btn">Info</a>
    <a href="#tab-2" class="tabs__btn">Settings</a>
    <a href="#tab-3" class="tabs__btn">History</a>
  </nav>
  <div id="tab-1" class="tabs__panel">Info content…</div>
  <div id="tab-2" class="tabs__panel">Settings content…</div>
  <div id="tab-3" class="tabs__panel">History content…</div>
</div>

.tabs__panel { display: none; padding: 24px; }
.tabs__panel:first-of-type { display: block; }
.tabs__panel:target { display: block; }
.tabs__panel:target ~ .tabs__panel:first-of-type { display: none; }
.tabs__btn { padding: 10px 20px; text-decoration: none; color: var(--text); border-bottom: 2px solid transparent; transition: all 0.2s; }
.tabs__btn:hover { color: var(--color-primary); }
/* Highlight active tab – modern syntax using :has() */
.tabs:has(#tab-1:target) [href="#tab-1"],
.tabs:has(#tab-2:target) [href="#tab-2"],
.tabs:has(#tab-3:target) [href="#tab-3"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

Pure‑CSS Tooltip

Tooltips are built with ::before / ::after pseudo‑elements and the attr() function.

<button class="tooltip" data-tip="Copy link">Copy</button>
<span class="tooltip tooltip--top" data-tip="This is a tip">Hover me</span>

.tooltip { position: relative; }
.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 999;
}
.tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.tooltip:hover::after,
.tooltip:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }
.tooltip--right::after { bottom: auto; left: calc(100% + 8px); top: 50%; transform: translateY(-50%) scale(0.8); }
.tooltip--right:hover::after { transform: translateY(-50%) scale(1); }

Scroll‑Driven Animations

The animation-timeline: scroll() feature (2023) enables scroll‑based animations without JavaScript.

.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; background: var(--color-primary);
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll(root block);
  animation-fill-mode: both; z-index: 1000;
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.fade-in-up {
  animation: fadeInUp linear both;
  animation-timeline: view(block);
  animation-range: entry 0% entry 40%;
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

Pure‑CSS Parallax Scrolling

Using perspective and translateZ creates a depth effect without JavaScript.

.parallax-container { height: 100vh; overflow-x: hidden; overflow-y: scroll; perspective: 1px; }
.parallax-layer { position: relative; transform-style: preserve-3d; }
.parallax-layer--back { transform: translateZ(-2px) scale(3); }
.parallax-layer--mid { transform: translateZ(-1px) scale(2); }
.parallax-layer--front { transform: translateZ(0); }

Sticky Positioning

position: sticky

creates fixed‑like elements without JavaScript.

.nav { position: sticky; top: 0; z-index: 100; background: var(--bg); backdrop-filter: blur(12px); }
thead th { position: sticky; top: 0; background: var(--card-bg); z-index: 1; }
td:first-child, th:first-child { position: sticky; left: 0; background: var(--bg); z-index: 2; }
.header { position: sticky; top: 0; animation: detect-sticky linear both; animation-timeline: scroll(root); animation-range: 0px 1px; }
@keyframes detect-sticky { from { box-shadow: none; } to { box-shadow: 0 2px 12px rgb(0 0 0 / 0.12); } }

Advanced CSS Grid Layouts

Beyond basic columns, Grid offers auto‑fill responsive grids, named areas, and experimental masonry.

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.grid > *:last-child:nth-child(odd) { grid-column: span 1; }

.dashboard {
  display: grid;
  grid-template-areas: "header header" "sidebar main" "footer footer";
  grid-template-columns: 260px 1fr;
  grid-template-rows: 60px 1fr 50px;
  min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
@media (max-width: 768px) {
  .dashboard { grid-template-areas: "header" "main" "sidebar" "footer"; grid-template-columns: 1fr; }
}

/* Experimental masonry (Chrome 115+) */
.masonry { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: masonry; gap: 16px; }

Subgrid

Subgrid lets child elements inherit the parent Grid's tracks, simplifying alignment across cards.

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.card { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0; }
/* Child elements automatically align to the same rows */
.card__image { /* row 1 */ }
.card__title { /* row 2 */ }
.card__content { /* row 3 */ }
.card__footer { /* row 4 */ }

CSS Layers ( @layer )

@layer

organizes styles into explicit layers, solving cascade conflicts.

@layer reset, base, components, utilities;

@layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; } }
@layer base { body { font-family: system-ui, sans-serif; line-height: 1.6; } }
@layer components { .button { padding: 8px 16px; border-radius: 6px; background: var(--color-primary); color: white; } }
@layer utilities { .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } }
@layer vendor { @import url('third-party.css'); }

CSS Scope ( @scope )

@scope

provides component‑level scoping similar to Vue’s scoped attribute.

@scope (.card) {
  .title { font-size: 1.25rem; font-weight: 600; }
  .content { color: #666; }
}
@scope (.card) to (.card-footer) {
  p { margin-bottom: 8px; }
}

Color Mixing ( color-mix() )

color-mix()

blends colors directly in CSS, removing the need for pre‑processor functions.

:root { --brand: #4f6ef7; }
.button { background: var(--brand); }
.button:hover { background: color-mix(in srgb, var(--brand) 80%, white); }
.button:active { background: color-mix(in srgb, var(--brand) 80%, black); }
.overlay { background: color-mix(in srgb, #000 50%, transparent); }
:root {
  --primary-100: color-mix(in srgb, var(--brand) 10%, white);
  --primary-200: color-mix(in srgb, var(--brand) 20%, white);
  --primary-500: var(--brand);
  --primary-700: color-mix(in srgb, var(--brand) 70%, black);
  --primary-900: color-mix(in srgb, var(--brand) 90%, black);
}

CSS Math Functions

Functions such as clamp(), min(), max(), round(), and calc() enable fluid typography and layout calculations.

.heading { font-size: clamp(1rem, 2.5vw, 1.5rem); }
.container { width: clamp(320px, 90%, 1200px); margin-inline: auto; }
.image { width: min(100%, 600px); }
.sidebar { width: max(200px, 20%); }
.grid { --cols: round(down, calc(100% / 200px), 1); }
.layout { --gap: 16px; --cols: 3; width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols)); }

Pure‑CSS Carousel

CSS Scroll Snap creates a fully functional carousel without JavaScript.

<div class="carousel">
  <div class="carousel__track">
    <div class="carousel__slide">Slide 1</div>
    <div class="carousel__slide">Slide 2</div>
    <div class="carousel__slide">Slide 3</div>
  </div>
  <nav class="carousel__dots">
    <a href="#slide-1">●</a>
    <a href="#slide-2">●</a>
    <a href="#slide-3">●</a>
  </nav>
</div>

.carousel { position: relative; overflow: hidden; border-radius: 12px; }
.carousel__track { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 100%; scroll-snap-align: start; height: 320px; }
.carousel__dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.carousel__dots a { color: rgb(255 255 255 / 0.5); text-decoration: none; font-size: 12px; transition: color 0.2s; }
.carousel__dots a:hover { color: white; }

Pure‑CSS Image Lazy‑Load Placeholder

Using aspect-ratio and a shimmering background creates a skeleton placeholder that fades in when the image loads.

.image-wrapper { aspect-ratio: 16 / 9; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; overflow: hidden; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.image-wrapper img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
.image-wrapper img.loaded { opacity: 1; }

Pure‑CSS Form Validation Feedback

Pseudo‑classes :valid, :invalid, :required, and :placeholder-shown enable styling validation states without JavaScript.

<div class="field">
  <input type="email" id="email" placeholder=" " required class="field__input" />
  <label for="email" class="field__label">Email address</label>
  <span class="field__error">Please enter a valid email address</span>
</div>

.field { position: relative; margin-bottom: 24px; }
.field__input { width: 100%; padding: 16px 12px 8px; border: 2px solid #ddd; border-radius: 8px; font-size: 16px; outline: none; transition: border-color 0.2s; }
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:focus ~ .field__label { transform: translateY(-20px) scale(0.8); color: var(--color-primary); }
.field__input:focus { border-color: var(--color-primary); }
.field__input:not(:placeholder-shown):valid { border-color: #38a169; }
.field__input:not(:placeholder-shown):valid ~ .field__error { display: none; }
.field__input:not(:placeholder-shown):invalid { border-color: #e53e3e; }
.field__input:not(:placeholder-shown):invalid ~ .field__error { display: block; }
.field__label { position: absolute; left: 12px; top: 16px; color: #999; transition: transform 0.2s, color 0.2s; transform-origin: left top; pointer-events: none; }
.field__error { display: none; color: #e53e3e; font-size: 13px; margin-top: 4px; }

Pure‑CSS Theme Switch

A hidden checkbox toggles a light/dark theme using CSS variables and the color-scheme property.

<!-- Checkbox controls theme -->
<input type="checkbox" id="theme-toggle" class="theme-checkbox" />
<label for="theme-toggle" class="theme-toggle">
  <span class="theme-toggle__sun">☀️</span>
  <span class="theme-toggle__moon">🌙</span>
  <span class="theme-toggle__thumb"></span>
</label>
<div class="app">…content…</div>

.theme-checkbox { display: none; }
.app { --bg: #fff; --text: #1a1a1a; background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; }
.theme-checkbox:checked ~ .app { --bg: #0f0f0f; --text: #e8e8e8; }
.theme-toggle { display: inline-flex; align-items: center; width: 64px; height: 32px; background: #ddd; border-radius: 16px; cursor: pointer; position: relative; transition: background 0.3s; }
.theme-toggle__thumb { position: absolute; left: 4px; width: 24px; height: 24px; background: white; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); }
.theme-checkbox:checked ~ .theme-toggle { background: #333; }
.theme-checkbox:checked ~ .theme-toggle .theme-toggle__thumb { transform: translateX(32px); }

CSS Performance Optimizations

Key techniques for high‑performance rendering:

will-change – hint the browser about upcoming transforms or opacity changes.

contain – isolate layout, style, and paint effects.

Prefer transform and opacity for animations; avoid animating layout‑affecting properties.

content-visibility: auto – skip rendering of off‑screen elements.

font-display: swap – show fallback fonts while custom fonts load.

Keep selectors simple; class selectors are fastest.

Use @layer to control cascade order and prevent third‑party overrides.

.animated-element { will-change: transform, opacity; }
.card:hover { will-change: transform; }
.card { contain: layout paint; }
.widget { contain: strict; }

/* Bad animation – triggers layout */
.bad-animation { animation: bad-move 0.3s; }
@keyframes bad-move { from { left: 0; top: 0; } to { left: 100px; top: 100px; } }

/* Good animation – only compositing */
.good-animation { animation: good-move 0.3s; }
@keyframes good-move { from { transform: translate(0, 0); } to { transform: translate(100px, 100px); } }

.list-item { content-visibility: auto; contain-intrinsic-size: 0 80px; }

@font-face { font-family: 'MyFont'; src: url('font.woff2') format('woff2'); font-display: swap; }

.card__link:hover { /* simple selector for best performance */ }

@layer third-party, components, utilities;