Home > Web Front-end > JS Tutorial > body text

Break up with CSS-in-JS

WBOY
Release: 2024-08-08 21:02:50
Original
651 people have browsed it

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. You can reduce the CSS scope by using the css module
  2. It is defined in the same place as the
  3. component. (colocation)
  4. Javascript Variable can be used.

disadvantage

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

huge downside

  1. Inserting CSS rules frequently causes a lot of computational work.
    1. Comparing Emotion and CSS
    2. There was a performance increase of about 50% when using CSS.
  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

CSS-in-JS 와 헤어지기

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 and calculate the average.

CSS-in-JS (Mantine)

CSS-in-JS 와 헤어지기

Tailwind

CSS-in-JS 와 헤어지기

result

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

CSS-in-JS 와 헤어지기

conclusion

  • Using statically generated CSS is considerably better in terms of performance.
  • Use Tailwind unless you need to use JS variables.
  • (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

The above is the detailed content of Break up with CSS-in-JS. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template