Unlocking the Power of CSS-in-JS: A Game-Changer for Developers

The Problem with CSS-in-JS

When using modern UI libraries like React, browsers wait for the JavaScript bundle file to download before rendering anything on the screen, increasing loading times. This is where First Meaningful Paint (FMP) comes in – a concept coined by Google to measure when the primary content of a page is visible to the user. As React gains popularity, bundle sizes can balloon from 2MB to over 20MB, causing headaches for developers.

Solving the Bundle Size Problem

To combat this issue, developers have created solutions like:

• Splitting bundles into chunks
• Lazy loading apps

But what about CSS-in-JS? This pattern has a similar problem, as browsers need to dynamically generate and update `