Workflow comparisons

Workflow

Advanced

Range style queries without multiple blocks

Modern @container style(
  --progress > 50%
) {
  .bar { ... }
}

Old /* Multiple style() blocks */
@container style(--p: 51%) {}
@container style(--p: 52%) {}
/* ...for each value */

hover to see old →

32% →

Workflow

Intermediate

Typed attribute values without JavaScript

Modern .bar {
  width: attr(
    data-pct type(<percentage>)
  );
}

Old // JS reading dataset
el.style.width =
  el.dataset.pct + '%';

hover to see old →

42% →

Workflow

Intermediate

Inline conditional styles without JavaScript

Modern .btn {
  background: if(
    style(--variant: primary):
      blue; else: gray
  );
}

Old // JavaScript toggling
el.classList.toggle(
  'primary', isPrimary
);

hover to see old →

35% →

Workflow

Intermediate

Reusable CSS logic without Sass mixins

Modern @function --fluid(
  --min, --max
) {
  @return clamp(...);
}

Old // Sass function
@function fluid($min, $max) {
  @return clamp(...);
}

hover to see old →

40% →

Workflow

Intermediate

Lazy rendering without IntersectionObserver

Modern .section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

Old // JS IntersectionObserver
new IntersectionObserver(
  (entries) => { /* render */ }
).observe(el);

hover to see old →

90% →

Workflow

Advanced

Scoped styles without BEM naming

Modern @scope (.card) {
  .title { font-size: 1.25rem; }
  .body { color: #444; }
}
/* .title only inside .card */

Old // BEM: .card__title, .card__body
.card__title { … }
.card__body { … }
// or CSS Modules / styled-components */

hover to see old →

82% →

Workflow

Advanced

Typed custom properties without JavaScript

Modern @property --hue {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* animatable, validated */

Old // --hue was a string, no animation
:root { --hue: 0; }
hsl(var(--hue), …) /* no interpolation */

hover to see old →

90% →

Workflow

Beginner

Dark mode defaults without extra CSS

Modern :root {
  color-scheme: light dark;
}

Old @media (prefers-color-scheme: dark) {
  input, select, textarea { ... }
}

hover to see old →

95% →

Workflow

Intermediate

Controlling specificity without !important

Modern @layer base, components, utilities;
@layer utilities { .mt-4 { margin-top: 1rem; } }

Old .card .title { ... }
.page .card .title { ... }
.page .card .title.special { color: red !important; }

hover to see old →

95% →

Workflow

Beginner

Theme variables without a preprocessor

Modern :root {
  --primary: #7c3aed;
}
.btn { background: var(--primary); }

Old // Sass: $primary: #7c3aed;
// Compiles to static #7c3aed
.btn { background: $primary; }

hover to see old →

97% →

Workflow

Beginner

Nesting selectors without Sass or Less

Modern .nav {
  & a { color: #888; }
}
/* plain .css, no build */

Old // requires Sass compiler
.nav {
  & a { color: #888; }
}

hover to see old →

88% →