The Road to Styled Components - CSS in Component-Based Systems

Explore the evolution of CSS in component-based systems through this conference talk from CSSconf EU 2017. Dive into the challenges of building user interfaces on the web and the shift towards component-based systems. Discover the thought process behind the creation of styled-components, a new approach to styling developed by Glen Maddern and Max Stoiber. Learn about the benefits and power of using JavaScript for styling, the concept of styled-components, and how they work in practice. Examine examples of style components, including titles and wrappers, and understand how to handle styling concerns such as nesting and media queries. Investigate the use of React components, interpolation, and ThemeProvider. Gain insights into the application of styled-components in React Native and reflect on the historical separation of concerns in web development. Conclude with a discussion on how this approach aims to improve the overall process of building user interfaces.

Intro
Blaine
Conclusion
Why style components
The purpose of components
Component examples
Why use JavaScript
The power of JavaScript
I hit a wall
Benefits arent worth it
What is styled components
The real power of styled components
How it works
Style component title
Style component wrapper
Styling concerns
HTML CSS
Nesting
Media queries
React components
Interpolation
ThemeProvider
Function Interpolation
New Themes
React Native
Wrapup
Making things better
Historical separation