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

https://vimeo.com/116209150

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

https://youtu.be/zR1lOuyQEt8

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