A thorough analysis of CSS-in-JS

Rate this content
Bookmark

There are two mutually exclusive methods that CSS-in-JS libraries use to generate and ship styles to the browser. Both methods have benefits and downsides, so let’s analyze them in detail from the loading performance perspective.

Andrei Pfeiffer
Andrei Pfeiffer
24 min
31 Aug, 2021
Video transcription, chapters and summary will be available later.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Rethinking CSS - Introducing Stylex
React Finland 2021React Finland 2021
25 min
Rethinking CSS - Introducing Stylex
Top Content
CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.
Styles and Theming with Restyle in React Native
React Summit Remote Edition 2020React Summit Remote Edition 2020
8 min
Styles and Theming with Restyle in React Native
Top Content
Haris is talking about the newly open-sourced library Restyle (https://github.com/Shopify/restyle); how it addresses many problems and pain points developers experience when managing evolving styles and theme support (gotta have dark mode!) in a React Native app.
Zero-runtime CSS-in-TypeScript with vanilla-extract
React Finland 2021React Finland 2021
29 min
Zero-runtime CSS-in-TypeScript with vanilla-extract
Can we have themeable CSS-in-TypeScript without the runtime cost? In this talk we'll have a quick look at how this can be achieved with vanilla-extract.
Type-safe Styling for React Component Packages: Vanilla Extract CSS
React Advanced Conference 2023React Advanced Conference 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.
Moving on From Runtime Css-In-Js at Scale
React Summit 2023React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
In this talk, Siddharth shares the challenges his team faced with optimising runtime css in js (styled-components) for performance. At GitHub, there are about 4000 React components that contain styles, Siddharth dives into the reasons for rethinking styling architecture, the challenges faced and lessons learned by migrating a big application.
Enhanced AST Static Analysis with Typescript Language Server
TypeScript Congress 2023TypeScript Congress 2023
12 min
Enhanced AST Static Analysis with Typescript Language Server
Most of the ecosystem tools, like bundlers or transpilers, are based on AST. And Typescript provides one of the best Developer Experiences to work with the code base.

This talk is about the experience of how beneficial it can be to use Type Hints and Typescript Language Server during the AST and static code analysis, based on the example of building a compile-time css-in-js library.