Why Don’t I Sell the Idea of Static Extraction with CSS-in-JS?

I originally wrote this as a reply to a comment that includes a question with an oft-repeated theme in this issue.

I don’t sell the idea because I don’t believe in it. We are making trade-offs. If you are are writing your css in javascript just so that you can use one less file you are kidding yourself. css-in-js is about flexibility and dynamic values both of which are severely handicapped by trying to statically extract them.

The view that css-in-js is some magic solution to the classic problems of css is a misguided one. There are still hard problems to figure out when writing apps with libraries like emotion, but that does not mean that css-in-js is the wrong choice. You have to make a choice at some point. Which set of issues would you like to deal with on a project? The issues of using CSS as we have in the past or the issues of using CSS in this way that we are now.

CSS-in-JS is a very, very simple process. You give me styles. I hash the content. I create a CSS Rule(s) using the hash as the class name. I put those Rule(s) into a stylesheet that exists somewhere in the DOM. This stylesheet uses the exact set of APIs that writing some CSS styles in an inline style tag and inserting it into the DOM would do.

What you believe is the biggest selling point is a myth. emotion is quite fast and able to handle some serious usage in its standard mode (100m+ views/month SSR sites). Do not let fear and uncertainty rule your decision of a library. Narrow down the problems you would like to solve and then ask yourself if CSS-in-JS is going to help you with those or avoid them altogether. Let’s pretend it will. Ok, now you’ve got a new set of problems you are going to learn how to solve and they are much more interesting than the problems that classical css presents, but you still have to learn how to deal with them. That takes time and energy that is precious in development cycles.

My larger point is to think about why we chose to use a library, framework, or pattern. Sometimes we create a problem for ourselves just so we can try something new. That is perfectly fine and its how we learn but just know that the context of that decision is everything. From my experience, the better route is to learn about this new thing and gain some understanding of the context of its use but do not force it but rather wait for a situation to arise when it is needed. Just be patient.