Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

pustelto.com

Post reply on HN
Print view View original

51–60 of 165 posts

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

#51

Post by gherkinnn »

diob wrote: post #39
vpfaulkner wrote: post #36

My gripes with traditional CSS styling are: - Styles are global - Styles are targeted via brittle, untyped, and opaque "magic strings” basically. This means mistakes are more likely to be caught at run time than compile time. Eg, I wouldn't get a compile time error if I did `position: oops` or `class="oops"`. - Styles are often "far away" from their target which makes mistakes more likely; ie this deeply nested HTML…

I've really enjoyed tailwind after using styled for a while. At least for my applications, the computers my users run on can't handle the performance implications of styled. But beyond the performance, I legitimately build faster using tailwind. I also find it easier to understand the components others build as well.

Completely agree.

This whole discussion feels silly after a day building things with Tailwind. The system, defaults, docs and tooling are excellent.

And dev speed is ludicrous.

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

#53

Post by nicoburns »

lhnz wrote: post #33
nicoburns wrote: post #28

Earlier quoted context omitted.

Indeed. Worth noting that classnames is a tiny library.

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

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.

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

#56

Post by e12e »

alesso_x wrote: post #52

The website is being rate limited, here’s a google cached version https://webcache.googleusercontent.com/search?q=cache%3Ahttp...

Google cache gives me a 404 (maybe because mobile?). This works for me:

https://web.archive.org/web/20210608190243/https://pustelto....

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

#57

Post by cosmotic »

topspin wrote: post #30

Great effort and I have no dispute with the methodology. The conclusion, however, is naïve. Specifically this part: "Great developer experience shouldn’t come at the expense of the user experience." Great developer experience can conceivably deliver better user experience. A more capable, responsive and lower defect application that load 10% slower may be a net improvement. I'm not arguing that CSS-in-JS actually del…

I very much agree that load time is not the only metric that should be measured. Unfortunately, it's one of the easiest to measure. It's also one which does not sacrifice any other UX metric like low completion time leading to less satisfaction sort of corruptible metrics.

Although, in my experience, usage of react is not indicative of a more capable, responsive, or lower defect application. Quite the opposite (for me) actually. React is a good (but not absolutely reliable) indicator of slow, unresponsive (in terms of response time, not resolution scaling, buggy, and frustrating UX.

From the code examples of the suggested library, it looks like a pretty simple drop in replacement for many (if not all) cases. 10% for free would be a slam dunk.

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

#58

Post by seumars »

vpfaulkner wrote: post #36

My gripes with traditional CSS styling are: - Styles are global - Styles are targeted via brittle, untyped, and opaque "magic strings” basically. This means mistakes are more likely to be caught at run time than compile time. Eg, I wouldn't get a compile time error if I did `position: oops` or `class="oops"`. - Styles are often "far away" from their target which makes mistakes more likely; ie this deeply nested HTML…

Complex manipulation can easily be done with a preprocessor. You can work around the other issues you mention by just, well, learning css instead of fighting against it.

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

#59

Post by trinovantes »

> You cannot access this site because the owner has reached their plan limits. Check back later once traffic has gone down.

First time I've seen this Cloudflare error. Doesn't their free plan have almost ~1TB buffer before they take notice and ask you to upgrade?

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

#60

Post by oblak »

I mean, I can appreciate some basic stuff like this but how about measuring rendering performance on low end devices? Like having large, medium, and small css files vs having the same thing BUT moving state changing things to js so that some specific styles are applied inline.

Somewhat superficial content but might spawn a few interesting discussions.

Post reply on HN