The Road to Styled-Components - Styling Component Based Systems

Overview

Explore the evolution of styling in component-based systems through this 44-minute conference talk from WeAreDevelopers. Dive into the thought process behind the creation of styled-components, a solution that combines the best of JavaScript and CSS. Learn about the challenges faced in existing CSS projects, the power of component-based styling, and the breakthroughs that led to this innovative approach. Discover how styled-components addresses issues like cascading, class names, and performance while adapting to various frameworks including React and Angular. Gain insights into testing, type systems, and the future of styling in web development.

Syllabus

Introduction
Spectrum
Open Source Elemental UI
Uncle Mings
CSS in JavaScript
Existing CSS projects
Button components
The power of components
Styling components
First breakthrough
Second breakthrough
Title and wrapper
Actual CSS
Adapting Props
Questions
Testing
Open PR
Cascade
Class Names
React Complex
Props
CSS nsj
Performance
Conversion
Angular
Custom Elements
Isolation
Type Systems