Components, Patterns And Sh*t It’s Hard To Deal With
summary
Years of code at Shazam and CloudCube using Mustache templates, BEM CSS and React examples produce concrete anti-patterns: class-name injection couples context to component and breaks refactors, dialog modifiers bloat site CSS, and predefined modifiers encourage preventive abstraction. Wrapping divs and spacing helper classes trade clarity for markup bloat, while open components expose an API (example: icon size/width passed by parent) that restores control but increases CSS complexity. No single solution solves every case; choose tradeoffs deliberately.
AI-written summary · about
chapters (12)
- 0:00Intro
- 9:51Class Name Injection
- 13:23Predefined Modifier
- 13:49Why Modifiers
- 14:36Map
- 15:04Rethink
- 15:54Wrapping divs
- 16:39Game intent
- 17:34Space relation
- 19:10Open Components
- 20:03Complexity
- 21:57Conclusion
related talks
26mComponents, Patterns and sh*t it’s Hard to Deal with
26mComponents, Patterns and Other Not-So-Simple Things to Manage
30mComponents, patterns and sh.t it’s hard to deal with
44mThe Future is in Pieces
35mAdvanced patterns in building React Components
40mCommon Component Decomposition Pitfalls (And How To Avoid Them!)
34mAdvanced React Component Patterns
24mDesigning Component API