search

threepointone / glamor

inline css for react et al
MIT License
3.66k stars 199 forks source link

Proposal: Use atomic css rules #148

Closed danielberndt closed 7 years ago

danielberndt commented 7 years ago

I just stumbled upon this article and was quite impressed by their approach and their performance numbers.

As I feel that glamor strives to combine all the best css-in-js ideas out there into one awesome package, I'm wondering how you feel about this idea of using atomic style rules?

AndrewIngram commented 7 years ago

Styletron is a more low-level API, so another question might be about whether Glamor can use it behind the scenes and focus on the friendly API side of things.

threepointone commented 7 years ago

if you're looking for benchmarks... https://twitter.com/threepointone/status/813804426989182976

to be fair, this is kind of cheating, caching against input objects with WeakMaps, so that it survives the flush(). but it is a valid strategy, and something I'll write up on soon.

The benchmark itself is a little weird, measuring server side rendering perf(!) and not worrying about so many other things glamor covers (prefixing, merging, all that jazz).

So yeah, don't worry too much about the perf unless you have a specific issue. In which case, make a lot of noise! I've got your back :)

threepointone commented 7 years ago

Closing this issue for now, not much that's actionable here per se.

danielberndt commented 7 years ago

Sorry for the rather vague ticket.

To be more concrete about what type of performance I'm interested in: byte size of the stylesheet when server-side rendering. There's the magical number of delivering html and css within the first 14KB to guarantee that something meaningful can be rendered with the first http package.

So using something like atomic css to (ideally) find the smallest possible combination of rules (which I guess is a NP-hard problem) would probably help here. But I also thing that gzip will probably replicate a lot of what atomic css is attempting anyways.

I'll open a new issue once we have some hard data showing the potential benefits of atomic css :)

threepointone commented 7 years ago

Glamor already exposes renderStaticOptimized to give you just the css required for the given page. You could try algorithms on that chunk if you want to optimize further.

That said, glamor already performs fairly well via gzip. Lemme know if you find anything new!