Refactoring CSS
summary
Practical checklist: run Project Wallace and CSS Stats, use Chrome DevTools Coverage or Puppeteer to spot unused rules (one homepage showed 64.8% unused CSS), and try Firefox’s style editor and Google’s baseline checker with analytics. Refactor by component, keep a temporary overrides file, prefer data-attributes, logical properties and font-clamp, migrate pixels to rems, and replace risky third-party widgets with CSS where it reduces maintenance burden and measurable regressions.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:48Why refactoring CSS matters
- 2:54Returning after leave
- 5:43Legacy codebases
- 9:15Motivation for refactoring
- 10:41CSS audit approach
- 15:34CSS audit tools
- 20:09Next steps after audit
- 23:20Documenting pain points
- 27:12Convincing product teams
- 35:43Refactoring in isolation
- 37:49Naming components
- 39:34Logical properties
- 41:22Progress over perfection
- 42:30Q&A
