CSS preprocessor performance
summary
A practical case study of a living style guide and component library for Trulia: a living style guide built from a grep-based inventory and automated visual checks (color, type, buttons) plus SASS variables, mixins and extends, then rolled out to high-traffic pages. Results: HTML payload ~48% smaller, page load ~21% faster, time to first byte ~60% faster, unused CSS cut ~150 KB and search page views up ~11%. Notes on pitfalls: SASS extends vs mixins and limiting nesting to avoid bloated selectors and duplicated output.
AI-written summary · about
chapters (19)
- 0:00Intro
- 16:07Trulia
- 20:46Display Properties
- 21:51Design Consistency
- 27:55Presentation Goals
- 29:32Rationalize Style
- 29:47Build or Replace
- 31:04Decisions
- 31:51Decision
- 32:25Result
- 34:21sass
- 35:12SAS docs
- 36:16SAS mixins
- 36:43Selector inheritance
- 37:23Nesting
- 40:19Tabs
- 42:07SAS
- 43:49CSS
- 55:16Conclusion
related talks
34mCreating Living Style Guides
39mStyle Guide Driven Development
44mXXLCSS: a Battle Plan for Scaling CSS
43mPreprocessors, Components, and CSS in JS
28mThe Night of the Living Style Guides
45mCSS-in-JS: FTW
28mClass 🥊Clash
34mPreprocessors, Components, and CSS in JS or" How I Learned to Stop Worrying and Love the Website"