threepointone/glamor

Proposal: Use atomic css rules

Closed this issue · 5 comments

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?

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.

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 :)

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

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 :)

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!