Syntax - Tasty Web Development Treats Why is Facebook’s HTML + CSS Such a Mess?
4 snips
Aug 7, 2023 The hosts dive into Facebook's messy HTML and CSS, unpacking the excessive use of div elements. They discuss Facebook's innovative StyleX system for managing CSS, addressing how it tackles style conflicts. Special attention is given to the complexities of tracking user interactions and the performance issues caused by 'divitis'. They also explore the challenges of cross-platform development and share insights on using React DevTools for better application inspection. Get ready for a fun ride through the world of web development!
AI Snips
Chapters
Transcript
Episode notes
Threads Divs
- Wes inspected Threads' landing page before launch.
- It contained 13 divs just for a full-screen canvas.
CSS Scoping
- Facebook uses garbled class names, similar to styled-components, for tight CSS scoping.
- This prevents conflicts in large codebases.
StyleX
- Facebook uses StyleX, a tool that generates unique class names for every CSS property-value combination.
- This approach helps manage their massive CSS codebase and likely improves performance.