I actually spent a whole bunch of time thinking about the tradeoffs. The
project has not been in production for that long so my experience is a bit
limited. So for now things are heavy on the theory. I actually just had a fun
idea last night and wrote to the closure compiler guys just now.
Anyways here is the current state with regards to performance:
CSS is generated by the compiled JS at runtime.
Pros:
- No extra render-blocking tag to fetch styles
- Dead-code removal also removes unused styles
- JS caching equals CSS caching.
- CLJS representation of CSS is probably smaller than actual CSS in total bytes
used (ie. less for the user to download, need more data to verify though)
Cons:
- CSS is generated at runtime, this takes time.
For my current project it amounts to about 25ms total, spread out over time.
Since styles are generated when they are needed, this can mean 5ms now and 20ms
when the user clicks a thing (maybe never). I have a solution in place to
generate the styles on the server but that is not dead-code aware (ie. all
styles are generated, not just the ones you use). Working through some ideas to
make this dead-code aware.
Cannot really comment on the performance of the CSS selectors, they should be
faster than nested rules but it is surprisingly hard to find actual good
benchmarks for this topic. Most of the information I could find is 2+ years old
and may not be relevant anymore. The conclusion seems to be that the the
selectors generated by shadow.markup should be ideal.
I can tell you with a bit of confidence that my solution is much faster than
any other css-in-js solution I looked at (styled-components, fela, aphrodite
and more I can't remember). Granted some of them are also shipping PostCSS
which isn't exactly fast and quite heavy on the download size.
I am committed as the fallback has always been to generate the styles on the
server. If everything else fails you still get a .css file you can use
normally. So far the client-side story looks promising though. Writing the
styles in CLJS has lessened my hate for CSS considerably. It is too early to
tell whether it will accumulate as much waste as traditional methods over time.
My instinct feels good about it though. Cursive already tells me whether or not
I'm using an element by just showing me whether a "def" is used or not.
YMMV
/thomas
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.
