A Closer Look at React CSS
summary
Six precise gotchas about React CSS drive the talk: React uses the DOM className and JS-style style props (hence camelCase like marginTop), inline styles cannot do :hover or complex selectors, template literals can inject "false" classes, creating styled-components inside render forces repeated unmount/remounts, and CSS modules can precreate hundreds of persistent <style> tags. The author built Kremling, which scopes classes and unmounts unused style tags to reduce DOM bloat and avoid the false-class bug.
AI-written summary · about
chapters (10)
- 0:00Introduction and quiz setup
- 1:49Why React CSS is controversial
- 3:15React CSS fundamentals
- 5:20Class name vs class in React
- 11:03Style prop and camelCase
- 14:41Class name vs style trade-offs
- 16:16Conditional class name gotcha
- 21:46Styled components pitfall
- 25:36CSS modules performance issue
- 29:11Summary and Kremmling framework
related talks
31mInline Styles: themes, media queries, contexts, & when it's best to use CSS
34mCSS in React
39mCSS. Under the hood.
31mCSS in JS: Is it worth the hype
29mHow to style in React and not lose friends
29mThe Lonely and Dark Road to Styling in React
01h 04mWhat makes React different?
32mYou've been doing CSS wrong