Styled-components: Styled-components Enforcing best practices
summary
Claims that styling moves into JavaScript to enforce component-focused rules by generating actual CSS in JS per component, removing class-name mapping, and providing a theme provider plus React Native support. Demonstrates working code, media queries, prop-based style functions, syntax-highlighting and stylelint integration, server-side rendering with extraction planned, and real production usage with good performance. Released on GitHub and installable via yarn, showcased at ReactiveConf 2016 with more than 700 attendees.
AI-written summary · about
chapters (22)
- 0:00Introduction
- 1:00Open source projects
- 1:47Component age
- 6:44Style components
- 7:30Enforcing best practices
- 8:52Why styling components
- 9:50Removing mapping
- 10:42Styling components
- 12:23CSS
- 13:56Props
- 15:22Buttons
- 15:55Theme
- 18:03Syntax Highlighting
- 19:03Running styling on styled components
- 19:46Using styled components right now
- 20:32Questions
- 21:39Global styles
- 23:04Inline styles
- 23:59Stock components
- 25:01IntelliJ syntax highlighting
- 26:21Extracting styles
- 28:08Wrap component in a function
related talks
34mStyling React/ReactNative Applications
04mThe Road to Styled Components
23mThe road to styled components: CSS in component-based systems
22mStyled Components
47mThe road to styled components, and the road ahead
31mThe road to <💅> styled-components" CSS in component-based systems"
29mStyling Components for React UI Kits
37mStyled Components, SSR, and Theming