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 <link> 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.
