How to style in React and not lose friends
summary
A war story about a team that fractures over styling leads into concrete comparisons: BEM and naming-based CSS, Sass preprocessing, raw inline styles (React style objects), and styled-components/CSS-in-JS. Each method gets code examples, folder structure samples, pros and cons (render cost, specificity, nesting pitfalls, loss of Cascade), and a note that styled-components emits real CSS and supports React Native. The checklist for choosing includes team mental models, need for theming, build complexity, and evidence that many options work if the team agrees.
AI-written summary · about
chapters (18)
- 0:00Start
- 1:09Styling and React
- 3:31Gripes against Css
- 5:17Standardization Methods
- 5:47Block Element Modifier Rules
- 6:46Component Structure
- 10:35Preprocessors
- 12:23Pros
- 13:14Cons
- 14:24Inline Styles
- 18:47Debug in the Dom
- 19:28Performance
- 25:09The Mental Models
- 26:12What Do You Need To Build
- 26:43Structuring Your Project
- 27:17Create the Right Environment
- 27:42Build Trust
- 28:07Be Vulnerable
related talks
29mThe Lonely and Dark Road to Styling in React
29mStyling React For Reuse
44mWriting styles for React components
25mStyled and SASSy: Choosing the Right React Styling Solution
07mReact Components and How To Style Them
31mThe Lonely and Dark Road to Styling in React
34mCSS in React
30mDynamic Styling Systems with React