Components, Patterns and Other Not-So-Simple Things to Manage
summary
Practical discussion of managing UI components and CSS with examples in React and SASS: injecting classes breaks maintainability and creates uncontrolled variants, ad-hoc modifiers bloat CSS, specialized patterns trade flexibility for semantics, and moving responsibilities to the container prevents overwrites. Positional classes save selector space but risk chaotic styles, “open components” give controlled flexibility at the cost of more complex APIs, and a core problem is unclear design leading to continuous refactors and an exploding DOM.
AI-written summary · about
chapters (12)
- 0:00Analysis path
- 2:10Pattern meaning
- 4:23Component library history
- 8:51Modular component challenges
- 10:38Style injection techniques
- 13:12Ad hoc modifiers limits
- 15:18Specialized patterns visual dictionary
- 17:27Component responsibilities
- 19:33Component spacing
- 21:24Flexible components exceptions
- 23:12Final reflection shared solution
- 25:47Conclusion
related talks
26mComponents, Patterns and sh*t it’s Hard to Deal with
23mComponents, Patterns And Sh*t It’s Hard To Deal With
30mComponents, patterns and sh.t it’s hard to deal with
34mAdvanced React Component Patterns
34mSecrets of building robust UI components
44mThe Future is in Pieces
40mCommon Component Decomposition Pitfalls (And How To Avoid Them!)
44mWriting good components