Notes On Work - by Caleb Porzio When CSS gets really hard
Nov 26, 2025
Dive into the challenges of CSS as complexities arise with the stepper/timeline component. Discover how visual lines complicate simple designs and learn about absolute positioning pitfalls. Explore the struggle with background eraser issues across various UI patterns. Caleb shares insights on API design and the trade-offs of exposing component sizes. Emphasizing structural solutions like CSS subgrid, he outlines the persistent problems that remain. Get ready for some real talk about the pitfalls of component design in CSS!
AI Snips
Chapters
Transcript
Building A Timeline Component
- Caleb describes a multi-step 'timeline' component with numbered indicators and connecting lines used in forms and onboarding.
- He explains the UI: circles for steps, connecting lines, and variations like horizontal and vertical layouts.
The Line Creates Hidden Complexity
- The component's layout is trivial with divs and Flexbox, but the connecting line is the real challenge.
- Small visual artifacts (lines, buffers) create disproportionate complexity in CSS components.
Avoid Absolute Positioning Hacks
- Avoid absolute positioning hacks where possible because they force hard-coded sizes and fiddly math.
- Seek structural solutions that don't require exact pixel math or positional offsets.