CSS-in-JS

'CSS-in-JS' is a flow that started from styled-components and defines styling within Javascript.

styled-component, Emotion, Mantine, etc.

merit

1. The applied scope is small.
   1. If you use the css module, you can also reduce the scope of css
2. Defined in the same place as the component. (colocation)
3. Javascript Variable can be used.

disadvantage

1. Runtime overhead
2. You must download the Css in JS library file.
   1. Emotion is 7.9KB.
   2. Mantine is 134KB!

huge downside

1. Frequently inserting CSS rules causes a lot of computational work.
   1. Comparing Emotion and CSS
   2. When using CSS, there was a performance increase of about 50%.
2. When using SSR, a variety of issues arise.
   1. If you look at the Emotion repo, there are many issues.

Real-world performance comparison

We measured performance by comparing CSS-in-JS and Tailwind using code actually used in production.

Setup

• CSS-in-JS uses Mantine (based on Emotion).
• Performance measurement uses React dev tool.
• The performance measurement target is a 30 * 5 Table (component name: SheetTable).

screen

Experiment progress

When you press the
• button, the above screen is rendered.
• Turn on recording in React Profiler and press the button to record screen rendering.
• Measures the rendering time of SheetTable.
• Perform a total of 5 times to obtain the average.

CSS-in-JS (Mantine)

Tailwind

result

• The rendering time was reduced by about 36%.
• Even by changing just one cell code, the performance improved significantly. (Of course, most of them are cells)
• On a 60Hz monitor, 1 frame is 16ms, but 3 frames -> 2 frames

conclusion

• Using statically generated CSS is considerably better in terms of performance.
• Unless you need to use JS variables, use Tailwind.
• (Additional) To introduce SSR, it is convenient to abandon CSS-in-JS.

Ref

[1] https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b