CSS-In-JS

Articles & Tutorials

How to Redesign Unsplash Using Styled Components (sitepoint.com)
Aug 29, 2019
Writing future-proof CSS is hard. Conflicting classnames, specificity issues, and so on, come up when you have to write and maintain thousands of lines of CSS. To get rid of the aforementioned issues, Styled Components was created.
  • Akshay Kadam
The Differing Perspectives on CSS-in-JS (css-tricks.com)
Aug 13, 2019
CSS-in-JS doesn't absolve you of learning CSS. Mostly, anyway.
  • Chris Coyier
Why you should definitely learn how to use CSS-in-JS (jxnblk.com)
Jul 20, 2019
From time to time, I've heard that CSS-in-JS poses a barrier to entry for some people. Like any new software abstraction, CSS-in-JS is intended to abstract away some of the complexities from a lower level implementation, in this case CSS.
  • Brent Jackson
Re-invent all the wheels! (sid.studio)
May 10, 2019
My favorite way of wrapping my head around such questions is to try to implement the thing myself. So, I built a mostly-useless css-in-js library.
Why do we keep talking about CSS-in-JS? (sid.studio)
Apr 26, 2019
Remember the first time you wrote some html/css? It was amazing, right?
  • Siddharth Kshetrapal
Overview of Popular CSS-in-JS Libraries for React (telerik.com)
Apr 10, 2019
We thought React was crazy when it came with HTML-in-JS (JSX), but today, we are happy that revolution happened. It helped us build better components. Why not do so with CSS too? As a matter of fact, you can. Meet CSS-in-JS.
Styling in React (CSS-in-JS) (codeburst.io)
Mar 13, 2019
React is a good tool for building flexible and reuseable UI components. However organizing styles in react can be difficult sometimes.
  • Chisom Okoye
8 reasons to use styled-components (blog.logrocket.com)
Feb 28, 2019
In this article, we will be looking at some of the various benefits of styled-components and why you should consider adopting it as your preferred CSS-in-JS framework.
  • Nwose Lotanna
Why I Write CSS in JavaScript (mxstbr.com)
Feb 18, 2019
For three years, I have styled my web apps without any .css files. Instead, I have written all the CSS in JavaScript. I know what you are thinking: “why would anybody write CSS in JavaScript?!” Let me explain.
CSS-in-JS and Static Rendering (frontarm.com)
Feb 02, 2019
CSS-in-JS can be a huge win for maintainability. But for large statically rendered websites, plain CSS still has its place.
How to CSS in React (react.christmas)
Dec 20, 2018
A hot topic these days, and I don't think we'll ever agree, but here are some ways to do CSS in your React app
  • Eirik Luka
A Field Guide to CSS-in-JS (medium.com)
Jan 09, 2018
You probably already have whiplash from how fast the Node/React ecosystem moves and how quickly new ideas and frameworks emerge
  • Scott Taylor
The simple guide to server-side rendering React with styled-components (medium.com)
Dec 12, 2017
The goal of this guide is to share the core principles of how to use styled-components in a server side rendered React application.
  • Dennis Brotzky
All You Need To Know About CSS-in-JS (hackernoon.com)
Nov 10, 2017
No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity).
  • Indrek Lasn

Video Guides & Talks

Nordic.js 2018 - Manage your styles as it's 2018 (youtube.com)
Dec 12, 2018
We will go through CSS-IN-JS libs for React with comparison, special features, documentation, SSR support and the whole developer experience.
  • Katarzyna Jastrzębska-Łachacz
Why styled components are best (youtube.com)
Apr 19, 2018
Styled components are my fav approach to styling React. Best balance between normal CSS and css-in-js.
What Is CSS In JS? / What Is Styled Components? (youtube.com)
Apr 18, 2018
In this What Is Wednesday, I answer the question. What Is CSS In JS as well as What is Styled Components?
Styling your React components (youtube.com)
Apr 16, 2018
Styling is hard. There are many ways to do it. Do you go CSS, do you go css-in-js, which css-in-js do you choose?
CSS in React (youtube.com)
Mar 31, 2018
React has no standard way to style components. A slew of ideas and frameworks have grown out of the community. But, with so many CSS in JS solutions, how do you know which one to choose? In this talk, I will cover five different ways to style your React projects, and the pros and cons of each approach. From CSS Modules with SASS to Styled Components, you’ll learn how each library works so that you know which one(s) best fits your needs.
  • Joe Seifi
Busting css-in-js myths (youtube.com)
Aug 31, 2017
I talk about latest happenings from the javascript/frontend world
Maintainable CSS in React (youtube.com)
Jul 20, 2017
This is a recording of my screen during my talk at the internal conference [email protected] on July 20th 2017. I talk about CSS in JS and how it can help us with css in applications.
Concerning CSS in JS (youtube.com)
May 23, 2017
I no longer care about: specificity, CSS linters, CSS preprocessors, vendor prefixing, removing unused CSS, finding CSS dependencies and dependents. I now care more about: whether it’s fast enough, whether it’s small enough, whether it’s familiar enough. These are some of my trade-offs. Because I use CSS-in-JS.
Styling React/ReactNative Applications (youtube.com)
May 01, 2017
What if we took the best of JavaScript and the best of CSS, and combined them together to create the ultimate solution? Glen Maddern (CSS Modules co-creator) and I sat down and starting thinking about styling in this new paradigm. Let's talk about what we thought about and why we arrived where we did – 💅 styled-components.

Courses & Video Series

CSS in JavaScript: With styled-components and React (manning.com)
Feb 05, 2019
A liveVideo course that unites the best parts of ES2015, React, and of course, CSS to bring real benefits to your styling solution!
  • Dustin Schau
Intermediate React (frontendmasters.com)
Sep 14, 2018
Learn to build scalable React applications using the tools and techniques available in the React ecosystem
React Styled Components (udemy.com)
Jul 20, 2018
Learn how to style your React components with React Styled Components.
  • Tom Phillips
React 101 For Designers (learnreact.design)
Sep 29, 2017
Learn React from the beginning. Style components yourself!
  • Linton Ye

Podcast Episodes

CSS, CSS-in-JS, and Future of the Frontend (devchat.tv)
Jun 25, 2019
The panel shares their first experiences with CSS and compares CSS and CSS-in-JS. The best ways to learn CSS is considered. The panel shares some coding tips; considering when to use libraries and when to use homegrown solutions.
Mitchell Hamilton - Writing CSS-in-JS with Emotion (fullstackradio.com)
Jun 20, 2019
In this episode, Adam talks to Mitchell Hamilton about writing your styles directly in your JavaScript components using the CSS-in-JS library Emotion.
  • Adam Wathan
  • Mitchell Hamilton
CSS in JS (spec.fm)
May 29, 2018
CSS in JS – is it good, is it bad? Una and Chris discuss this still unresolved debate.
  • Una Kravets
  • Chris Dhanaraj
Emotion with Kye Hohenberger (reactpodcast.com)
May 15, 2018
Kye Hohenberger is the author of the Emotion JavaScript library, a popular choice among React developers who prefer using CSS-in-JS to traditional CSS stylesheets. In this episode we discuss his work on Emotion including where he got the initial inspiration for the project and his motivation for creating it. We also discuss the future of the project and what may be in store for the future of CSS-in-JS.

Libraries

react-with-styles (airbnb.io)1411
v3.2.3
Jul 04, 2019
Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation
emotion (emotion.sh)7057
v10.0.14
Jun 26, 2019
CSS-in-JS library designed for high performance style composition
  • Mitchell Hamilton
styletron-react (styletron.js.org)2643
v5.2.0
Jun 21, 2019
Toolkit for component-oriented styling.
  • Ryan Tsao
styled-components (styled-components.com)22188
v4.3.2
Jun 20, 2019
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
polished (polished.js.org)4854
v3.4.1
Jun 16, 2019
A lightweight toolset for writing styles in JavaScript.
linaria (linaria.now.sh)3419
v1.3.1
Mar 08, 2019
Zero-runtime CSS in JS library.
  • Satyajit Sahoo
  • Paweł Trysła
  • Michał Pierzchała
  • Callstack
styled-jsx (github.com)4211
v3.2.1
Feb 11, 2019
Full CSS support for JSX without compromises
  • Giuseppe Gurgone
  • Guillermo Rauch
  • Leo Lamprecht
  • ZEIT
styled-tools (github.com)592
v1.7.1
Jan 22, 2019
Useful interpolated functions for styled-components, emotion, JSS and other CSS-in-JS libraries.
  • Diego Haz