Runtime CSS-in-JS deserves a rehearing
Runtime CSS-in-JS has largely been written off as too expensive for the browser. The reasons are familiar: some libraries rebuilt styles on every React render, interleaved stylesheet writes with rendering, accumulated generated CSS, and added React overhead to every styled element. Server rendering was awkward, React Server Components seemed incompatible, and build-time CSS appeared to eliminate…
The article titled "Runtime CSS-in-JS deserves a rehearing" discusses the ongoing debate surrounding the performance implications of runtime CSS-in-JS libraries. It references several studies and reports from 2019 to 2022 that highlight the hidden costs of various CSS-in-JS libraries and the potential benefits of generating styles early in the process.
The author argues that while browser generation is not always the most efficient option, it should remain available for cases where composition decisions remain open. The article uses the Tasty project as a case study, demonstrating how a runtime-capable system can provide benefits when it controls the timing and location of style generation.
Ultimately, the author suggests that the decision to use runtime CSS-in-JS should be based on a careful evaluation of the specific needs and constraints of each project.
Brief written by urgent.news from Dev.to's own syndicated text. Machine-written — may contain errors; check the original before relying on it.
