Real-world CSS vs. CSS-in-JS performance comparison

Re:Real-world CSS vs. CSS-in-JS performance comparison by stevebmark on Tuesday June 08, 2021 @04:11PM (#27440126)

CSS modules solves all of these problems (except the separate file), and also lets you write vanilla CSS, and not have to hack around the limitations of css-in-js. Dynamic styles are easy with React's `css` prop, or simply passing in an additional class name.

[ Parent | on HN ]

Re:Real-world CSS vs. CSS-in-JS performance comparison by mikewhy on Tuesday June 08, 2021 @04:16PM (#27440193)

React doesn't have a CSS prop.

[ Parent | on HN ]

Re:Real-world CSS vs. CSS-in-JS performance comparison by frank_nitti on Tuesday June 08, 2021 @04:33PM (#27440387)

Must be referring to the style prop for jsx elements whose argument conforms to the React.CSSProperties interface

[ Parent | on HN ]

Re:Real-world CSS vs. CSS-in-JS performance comparison by mikewhy on Tuesday June 08, 2021 @05:02PM (#27440748)

Hard to say, for instance the very popular styled-components package does add a `css` prop magically to all elements.

[ Parent | on HN ]

Re:Real-world CSS vs. CSS-in-JS performance comparison by girvo on Tuesday June 08, 2021 @10:50PM (#27443696)

I think they've assumed `styled-components` is default?

[ Parent | on HN ]

Re:Real-world CSS vs. CSS-in-JS performance comparison by hudixt on Tuesday June 08, 2021 @04:20PM (#27440232)

Added one more point on API. Also, you'll probably end up using one more library called classname for better classname management.

https://www.npmjs.com/package/classnames

In the end, I generally prefer to use tailwind + emotion. My goals usually is to save time and make system more consistent rather than perf gains, which isn't that much on new systems.

[ Parent | on HN ]

Re:Real-world CSS vs. CSS-in-JS performance comparison by nicoburns on Tuesday June 08, 2021 @04:28PM (#27440328)

Indeed. Worth noting that classnames is a tiny library.

[ Parent | on HN ]

Re:Real-world CSS vs. CSS-in-JS performance comparison by lhnz on Tuesday June 08, 2021 @04:43PM (#27440509)

I've heard that `clsx` is faster: https://github.com/lukeed/clsx

[ Parent | on HN ]

Re:Real-world CSS vs. CSS-in-JS performance comparison by nicoburns on Tuesday June 08, 2021 @05:19PM (#27440982)

Looks like a well designed library (and it is only 40 lines long - but then the original isn't much bigger). But it's hard for me to imagine code where this is a bottleneck.

[ Parent | on HN ]