Torchbox 2023 Tech Day: Future CSS Today ⚡

Talk at the Torchbox 2023 Tech Day, on modern CSS techniques we could use today.

View the slides: Future CSS Today


  • No tooling 🔥
  • More with less
  • Great browser support

No tooling?

Tooling where it makes sense.

Still using linting: Prettier, Stylelint.

Also still using compatibility & performance tools: Autoprefixer, cssnano.

Writing modern syntax thanks to postcss-preset-env.

More with less?

Vanilla CSS without compromising on expressiveness

  • Co-location of related code
  • Not a thousand lines of code
  • No overrides

Great browser support?

Support older browsers so users don’t have to upgrade their devices.

  • Opera Mini (1%)
  • IE11 (0.5%)
  • Safari 12-14 (0.5%)
  • Android Browser 4.4.4 (0.3%)
  • Chrome 69-89 (1.2%)
  • Firefox 3.6


More with less, continued

Things in CSS that take lots of lines for no reason

  • Responsive design - avoid media queries
  • Interaction styles (hover, focus, touch, etc.)
  • Right-to-left support
  • Light and dark themes
  • Contrast themes / Windows High Contrast Mode
  • Print stylesheets

CSS patterns: layout

  • Flexbox and Grid 🐸
  • Logical properties and values
.slide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-inline-start: 5rem;



  • System font stack
  • Dynamic viewport units
  • clamp()
body {
  font-family: "Segoe UI", "system-ui", "Roboto", "Helvetica Neue", "Arial",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  font-size: clamp(1rem, calc(2dvmax + 1rem), 5dvmin);



All of them!

  • CSS variables
  • oklch()
  • color-mix()
  • System colors
--light-dark: color-mix(in oklch, CanvasText 10%, Canvas 50%);
--dark-light: color-mix(in oklch, Canvas 10%, CanvasText 50%);
color: color-mix(in oklch, var(--light-dark) 20%, CanvasText);



View source


Does it work?

Yes and no

  • This shows promise but there are still a lot of hurdles.
  • Likely practical for small projects within the next 2 years.
  • Early adopters can use this now with little compromises.

Takeways for pro™ projects

Great things you should definitely use on projects:

  • Media queries 💯
  • CSS variables 💅
  • Sass and PostCSS tooling