Refactoring (the way we talk about) CSS

on YouTube ↗27m

" summary

Argues CSS layout is a coherent system centered on the display property, not a collection of tricks, and shows concrete semantics like display:block grid (outer/inner types) and flow-relative logical properties so layouts flip with writing-mode. Demonstrates content-sizing keywords min-content / max-content, uses the Firefox grid inspector to visualize tracks, cites browser uptake (Firefox 70 implements new display syntax) and notes features are implemented but uneven so feature queries and progressive enhancement remain necessary.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 3:13Understanding display
3. 5:26Changing the value of display changes that element and its direct children.
4. 11:00Logical Properties & Values
5. 14:33justify-content In Grid, inline dimension space distribution between tracks
6. 15:42justify-content In Flex, main axis space distribution between flex items

" related talks

• 45mRefactoring the way we talk about CSSRachel Andrew · XML Prague 2020
• 18mRefactoring with CSS GridOliver Williams · CSSconf EU 2018
• 01h 11mCSS is RadMiriam E Suzanne · SmashingConf Live 2020
• 39mNext Level CSSRachel Andrew · ffconf 2016
• 51mWeb Design Engineering With the New CSSMatthias Ott · CSSDAY 2024
• 27mChanging The Layout GameChris Wright · Front-Trends 2017
• 50mPresent and Future of CSS LayoutTab Atkins · CSS Day 2014
• 55mSmart LayoutsAhmad Shadeed · CSS Day 2025