Refactoring the way we talk about CSS
summary
Argues that CSS teaching must shift from rote tricks to the actual layout system: start with display property and formatting contexts (normal flow, flow-root) so switching to flex or grid is just changing a container’s inner formatting context. Explains logical sizing with inline-size/block-size and logical margin/border mappings, shows content-based sizing using min-content and max-content, recommends Firefox’s grid inspector and MDN for examples, and says feature queries let styles fork safely by capability.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 2:08Teaching CSS differently
- 11:38Normal flow and formatting contexts
- 14:09Writing modes explained
- 19:49Box alignment basics
- 26:55CSS hacks vs specifications
- 31:07Sizing with min and max content
- 35:37Browser support and specs
- 38:45Refactoring CSS education
- 41:11Q&A
related talks
27mRefactoring (the way we talk about) CSS
01h 11mCSS is Rad
21mLove the web for what it is
17mThe New CSS Layout
50mPresent and Future of CSS Layout
04h 48mIntermediate To Advanced CSS For Practical Peoples
51mWeb Design Engineering With the New CSS
33mUsing DevTools To Understand Modern CSS Layouts – Chen Hui Jing at