3 talks you should watch on styling React components
Do you ever wonder what the hype is about all these styling libraries and what their point is?
CSS Modules, Styled components, Radium, glamourous, JSS, jsxstyle - you name it.
It’s hard to get an overview of how they came about and what each is trying to solve.
But if you take a step back, it all boils down to three paradigms:
- CSS in JS
- CSS Modules
- Styled components
Each of these were announced and explained at conferences, and you can get a better understanding of the problems they are trying to solve and their approach directly from their creators.
CSS in your JS
The talk that started it all. This is the talk that triggered the community to start experimenting with CSS in JS and was direct inspiration for CSS modules, JSS and Radium to name just a few.
It presents the struggles of the Facebook team with CSS at scale and the ways in which they solved them internally.
Watch it if you want to understand:
- what issues native CSS has at scale
- how CSS in JS can solve them
Christopher Chedau
@vjeux
NationJS 2014
Slides:
https://speakerdeck.com/vjeux/react-css-in-js
The Case for CSS Modules
Great overview of the reasoning behind CSS Modules.
Explains how the Webpack css-loader evolution allowed the invention of CSS modules and also shares what other ideas were also tackled by libraries in the community at the time (JSS, Radium).
Watch it if you want to understand:
- why CSS modules exist
- issues with CSS at scale and how different libraries aim to solve them
“The Case for CSS Modules” by Mark Dalgleish
ReactiveConf, 2-4 Nov 2015
Bratislava, Slovakia
Styling React/React Native Applications
Great overview of the styled components library.
Goes through the best practices for writing and styling React components in general and explains how styled components are the next step in the way we style components.
Turns out, writing styled components is really fun!
Watch it if you want to understand:
- motivation for creating styled components
- main features and advantages for using them
Max Stoiber
React Amsterdam 2017
https://youtu.be/bIK2NwoK9xk
Comments ()